:root{
  --navy: #16202C;
  --navy-2: #1F2E3D;
  --steel: #2C4257;
  --steel-light: #4A6178;
  --bg: #EEF1F4;
  --card: #FFFFFF;
  --line: #DCE2E8;
  --text: #1F2937;
  --text-dim: #6B7686;
  --orange: #E1611F;
  --orange-dark: #B94E17;
  --green: #2C8A52;
  --green-bg: #E7F5EC;
  --amber: #C6820F;
  --amber-bg: #FBF1DD;
  --red: #C0392B;
  --red-bg: #FBEAE7;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Noto Sans TC', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  display:flex;
  min-height:100vh;
  font-size:16px;
}
/* ---------- SIDEBAR ---------- */
.sidebar{
  width:236px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#CBD5E0;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.sidebar::before{
  content:"";
  position:absolute;
  top:-40px; left:-40px;
  width:180px; height:180px;
  background: repeating-linear-gradient(135deg, rgba(225,97,31,0.10) 0 2px, transparent 2px 14px);
  pointer-events:none;
}
.brand{ padding:22px 20px 18px; border-bottom:1px solid rgba(255,255,255,0.08); position:relative; z-index:1; }
.brand-mark{ font-family:var(--mono); font-size:16px; letter-spacing:2px; color: var(--orange); font-weight:600; }
.brand-name{ font-size:17px; font-weight:900; color:#fff; margin-top:4px; letter-spacing:1px; }
.brand-sub{ font-size:16px; color:#8A97A8; margin-top:2px; }
.company-switch{ margin:16px 20px 8px; background: rgba(255,255,255,0.06); border-radius:8px; padding:4px; display:flex; gap:4px; z-index:1; position:relative; }
.company-switch button{ flex:1; border:none; background:transparent; color:#9AA6B5; font-family:var(--sans); font-size:16px; font-weight:500; padding:8px 4px; border-radius:6px; cursor:pointer; transition:.15s; }
.company-switch button.active{ background: var(--orange); color:#fff; font-weight:700; }
nav{ margin-top:10px; z-index:1; position:relative; flex:1;}
.nav-group-label{ font-size:16px; letter-spacing:2px; color:#5B6B7E; padding:16px 20px 6px; font-weight:600; }
.nav-item{ display:flex; align-items:center; gap:10px; padding:10px 20px; color:#B7C2D0; cursor:pointer; font-size:16px; border-left:3px solid transparent; transition:.15s; }
.nav-item:hover{ background: rgba(255,255,255,0.05); color:#fff;}
.nav-item.active{ background: rgba(225,97,31,0.14); border-left:3px solid var(--orange); color:#fff; font-weight:700; }
.nav-icon{ width:16px; text-align:center; font-size:16px; opacity:.85; }
.sidebar-foot{ padding:14px 20px 18px; font-size:16px; color:#5B6B7E; border-top:1px solid rgba(255,255,255,0.08); z-index:1; }

/* ---------- MAIN ---------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{ height:60px; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 28px; }
.crumb{ font-size:16px; color:var(--text-dim);}
.crumb b{ color:var(--text); font-weight:700;}
.topbar-right{ display:flex; align-items:center; gap:18px; font-size:16px; color:var(--text-dim);}
.date-chip{ font-family:var(--mono); background:var(--bg); border:1px solid var(--line); padding:6px 10px; border-radius:6px; }
.content{ padding:26px 30px 60px; overflow-y:auto;}
.view{ display:none; }
.view.active{ display:block; animation: fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

h1.page-title{ font-size:21px; font-weight:900; margin-bottom:4px; letter-spacing:.3px; }
.page-sub{ font-size:16px; color:var(--text-dim); margin-bottom:22px;}

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 18px 16px; position:relative; overflow:hidden; }
.stat-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--stat-color, var(--orange)); }
.stat-label{ font-size:16px; color:var(--text-dim); font-weight:500;}
.stat-value{ font-family:var(--mono); font-size:26px; font-weight:600; margin-top:6px;}
.stat-value span{ font-size:16px; color:var(--text-dim); font-weight:400;}
.stat-delta{ font-size:16px; margin-top:6px; font-weight:600;}
.up{ color:var(--green);} .down{ color:var(--red);} .flat{ color:var(--text-dim);}

.panel{ background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:20px; overflow:hidden; }
.panel-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;}
.panel-title{ font-size:18px; font-weight:700;}
.panel-title .tag{ font-family:var(--mono); font-size:16px; color:var(--text-dim); font-weight:400; margin-left:8px; }
.btn{ border:none; border-radius:6px; padding:8px 14px; font-size:16px; font-weight:700; cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.btn-primary{ background:var(--orange); color:#fff;}
.btn-primary:hover{ background:var(--orange-dark);}
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{ background:var(--bg);}
.btn-sm{ padding:5px 10px; font-size:16px;}

table{ width:100%; border-collapse:collapse; font-size:16px;}
thead th{ background:var(--bg); text-align:left; padding:9px 12px; font-weight:700; color:var(--steel); border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td{ padding:9px 12px; border-bottom:1px solid #EEF1F4; color:var(--text); white-space:nowrap;}
tbody tr:hover{ background:#FAFBFC;}
td.num, th.num{ text-align:right; font-family:var(--mono);}
.mono{ font-family:var(--mono); }

.badge{ display:inline-block; font-size:16px; font-weight:700; padding:3px 9px; border-radius:20px; }
.badge-green{ background:var(--green-bg); color:var(--green);}
.badge-amber{ background:var(--amber-bg); color:var(--amber);}
.badge-red{ background:var(--red-bg); color:var(--red);}
.badge-steel{ background:#E7ECF1; color:var(--steel);}

.dropzone{ border:2px dashed #C7D0DA; border-radius:10px; padding:28px; text-align:center; background: #FBFCFD; margin-bottom:18px; }
.dropzone .dz-icon{ font-size:28px; margin-bottom:8px;}
.dropzone .dz-title{ font-weight:700; font-size:16px;}
.dropzone .dz-sub{ font-size:16px; color:var(--text-dim); margin-top:4px;}

.formula-chip{ display:inline-flex; align-items:center; gap:8px; background:#FBF1DD; border:1px solid #EFD9A6; color:#8A5A0A; font-family:var(--mono); font-size:16px; padding:7px 12px; border-radius:8px; margin:10px 0 18px; }
.formula-chip b{ color:var(--orange-dark);}

.grid-2{ display:grid; grid-template-columns: 1.3fr .9fr; gap:20px;}

.doc-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); background:#FAFBFC; }
.field label{ display:block; font-size:16px; color:var(--text-dim); font-weight:600; margin-bottom:4px;}
.field .val{ font-size:16px; font-weight:600;}
.field .val.mono{ font-family:var(--mono); }
.field input, .field select{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:16px;
  font-family:var(--sans); background:#fff; color:var(--text);
}
.field input.mono{ font-family:var(--mono); }

.summary-box{ display:flex; justify-content:flex-end; gap:26px; padding:16px 18px; background:#FAFBFC; border-top:1px solid var(--line); }
.summary-item{ text-align:right;}
.summary-item .lbl{ font-size:16px; color:var(--text-dim);}
.summary-item .amt{ font-family:var(--mono); font-size:16px; font-weight:700; margin-top:2px;}
.summary-item.total .amt{ color:var(--orange-dark); font-size:19px;}

.step-track{ display:flex; align-items:center; gap:6px; margin-bottom:20px; flex-wrap:wrap;}
.step{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:20px; background:#fff; border:1px solid var(--line); font-size:16px; font-weight:600; color:var(--text-dim); cursor:pointer;}
.step.done{ background:var(--green-bg); color:var(--green); border-color:transparent;}
.step.current{ background:var(--orange); color:#fff; border-color:transparent;}
.step-arrow{ color:#C7D0DA; font-size:16px;}

.toolbar{ display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.search-input{ border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:16px; font-family:var(--sans); width:220px; background:#fff; }
select.filter{ border:1px solid var(--line); border-radius:6px; padding:8px 10px; font-size:16px; background:#fff; font-family:var(--sans); color:var(--text); }
.spacer{ flex:1;}
.foot-note{ font-size:16px; color:var(--text-dim); padding:12px 18px;}
.company-flag{ display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:700; padding:4px 10px; border-radius:6px; background:#E7ECF1; color:var(--steel); }
.company-flag.b{ background:#FBEAE0; color:var(--orange-dark);}

/* chained select row */
.select-row{ display:flex; align-items:flex-end; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.select-block{ display:flex; flex-direction:column; gap:5px;}
.select-block label{ font-size:16px; color:var(--text-dim); font-weight:700; letter-spacing:.5px;}
.select-block select{
  border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:16px; font-family:var(--sans);
  background:#fff; min-width:200px; color:var(--text); font-weight:600;
}
.select-arrow{ color:#C7D0DA; font-size:18px; padding-bottom:9px;}
.select-badge{ align-self:flex-end; margin-bottom:9px; }

/* batch cards */
.batch-list{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.batch-card{ border:1.5px solid var(--line); border-radius:10px; padding:13px 16px; background:#fff; cursor:pointer; min-width:190px; position:relative; transition:.15s;}
.batch-card:hover{ border-color:#C7D0DA;}
.batch-card.selected{ border-color:var(--orange); background:#FFF6F0;}
.batch-card .radio{ width:14px; height:14px; border-radius:50%; border:2px solid #C7D0DA; display:inline-block; margin-right:8px; position:relative; top:2px;}
.batch-card.selected .radio{ border-color:var(--orange);}
.batch-card.selected .radio::after{ content:""; position:absolute; inset:2px; background:var(--orange); border-radius:50%;}
.batch-card .b-title{ font-weight:700; font-size:16px; display:flex; align-items:center;}
.batch-card .b-sub{ font-size:16px; color:var(--text-dim); margin-top:6px; margin-left:22px;}
.batch-card.add{ display:flex; align-items:center; justify-content:center; color:var(--text-dim); border-style:dashed; font-weight:700; font-size:16px;}

/* toggle group (完整版/精簡版) */
.toggle-group{ display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.toggle-group button{ border:none; background:#fff; padding:8px 16px; font-size:16px; font-weight:700; color:var(--text-dim); cursor:pointer;}
.toggle-group button.active{ background:var(--orange); color:#fff;}
.toggle-group button + button{ border-left:1px solid var(--line);}

/* multi-select chips (shipment picks for invoice) */
.chip-check{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:20px; padding:7px 13px; font-size:16px; cursor:pointer; background:#fff; font-weight:600; color:var(--text-dim);}
.chip-check.active{ border-color:var(--orange); background:#FFF6F0; color:var(--orange-dark);}
.chip-check .dot{ width:8px; height:8px; border-radius:50%; background:#C7D0DA;}
.chip-check.active .dot{ background:var(--orange);}

/* pallet label */
.pallet-card{ border:2px solid var(--steel); border-radius:10px; overflow:hidden; background:#fff; margin-top:4px;}
.pallet-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:16px 18px 10px; border-bottom:2px solid var(--steel);}
.pallet-title{ font-size:26px; font-weight:900; letter-spacing:1px; line-height:1.15;}
.pallet-code-box{ border:1.5px solid var(--steel); border-radius:6px; padding:6px 14px; text-align:center; min-width:120px;}
.pallet-code-box label{ display:block; font-size:16px; color:var(--text-dim); font-weight:700;}
.pallet-code-box input{ border:none; font-family:var(--mono); font-weight:800; font-size:16px; text-align:center; width:100%; background:transparent; color:var(--orange-dark);}
.pallet-sub{ padding:8px 18px; font-family:var(--mono); font-size:16px; color:var(--text-dim); border-bottom:1px solid var(--line);}
.pallet-project{ padding:9px 18px; font-weight:700; font-size:16px; border-bottom:1px solid var(--line);}
.pallet-total{ display:flex; gap:34px; padding:11px 18px; background:#FAFBFC; border-bottom:1px solid var(--line);}
.pallet-total .lbl{ font-size:16px; color:var(--text-dim); font-weight:600;}
.pallet-total .val{ font-family:var(--mono); font-size:18px; font-weight:800;}

::-webkit-scrollbar{ width:10px; height:10px;}
::-webkit-scrollbar-thumb{ background:#C7D0DA; border-radius:6px;}
::-webkit-scrollbar-track{ background:transparent;}

/* 欄位變多、字體加大後，寬表格允許橫向捲動，避免擠壓版面 */
.table-wrap{ width:100%; overflow-x:auto; }
.table-wrap table{ min-width:900px; }

/* 危險操作按鈕（整單刪除） */
.btn-danger{ background:var(--red); color:#fff; }
.btn-danger:hover{ background:#9E3226; }

/* 編輯彈跳視窗 */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,20,26,0.55);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-box{
  background:#fff; border-radius:12px; width:min(560px, 100%); max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--line); font-weight:800; font-size:18px; }
.modal-body{ padding:20px 22px; display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.modal-body .field-full{ grid-column:1 / -1; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }

.hidden-file-input{ display:none; }

/* 銷貨明細彈窗：多品項列 */
.sale-row{
  display:flex; gap:12px; align-items:flex-end;
  margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--line);
}
.sale-row .field{ flex:1; margin-bottom:0; }
.sale-row-remove{ flex:0 0 auto; }

/* ---- PHP 版：nav / company-switch 改用 <a> 標籤，補上連結樣式 ---- */
.nav-item{ text-decoration:none; }
.company-switch a.btn-co{
  flex:1; border:none; background:transparent; color:#9AA6B5; font-family:var(--sans); font-size:16px;
  font-weight:500; padding:8px 4px; border-radius:6px; cursor:pointer; text-align:center; text-decoration:none; display:block;
}
.company-switch a.btn-co.active{ background:var(--orange); color:#fff; font-weight:700; }
a.btn{ text-decoration:none; display:inline-flex; }
form{ margin:0; }

/* ===== 列印棧板標籤：只印 .print-area 標記的內容，其餘全部隱藏 ===== */
@media print{
  body *{ visibility:hidden; }
  .print-area, .print-area *{ visibility:visible; }
  .print-area{
    position:absolute;
    left:0; top:0;
    width:100%;
    margin:0;
    border-width:2px;
  }
  .sidebar, .topbar, .back-to-top, .bar{ display:none !important; }
}

.btn-cell {
  white-space: nowrap;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-table-wrap table{ min-width: 0; width: 100%; }