:root{font-family:"Microsoft JhengHei",system-ui,sans-serif;color:#172033;background:#f5f7fb}
*{box-sizing:border-box}body{margin:0}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#173b67;color:#fff}
header h1{margin:0;font-size:24px}header p{margin:4px 0 0;opacity:.8}
#health{background:#ffffff24;padding:8px 12px;border-radius:999px}
button{border:0;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700}

.layout{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  min-height:calc(100vh - 96px);
}

.sidebar{
  background:#fff;
  border-right:1px solid #dce2ea;
  padding:14px 10px 24px;
  position:sticky;
  top:0;
  height:calc(100vh - 96px);
  overflow-y:auto;
  z-index:12;
}

.nav-group{margin-bottom:18px}
.nav-group-title{
  padding:6px 14px;
  color:#8792a6;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
}
.nav-group button{
  display:block;
  width:100%;
  padding:12px 14px;
  margin:3px 0;
  background:transparent;
  color:#172033;
  text-align:left;
  font-size:16px;
  border-left:4px solid transparent;
}
.nav-group button:hover{background:#f1f5fa}
.nav-group button.active{
  background:#e4eefb;
  color:#124f8c;
  border-left-color:#1769aa;
}

.mobile-menu-button{
  display:none;
  width:100%;
  border-radius:0;
  padding:12px 16px;
  background:#fff;
  color:#173b67;
  text-align:left;
  border-bottom:1px solid #dce2ea;
}

.sidebar-backdrop{
  position:fixed;
  inset:0;
  background:#0007;
  z-index:11;
}
button.primary{background:#1769aa;color:#fff}button.success{background:#087f5b;color:#fff}
button.danger{background:#b42318;color:#fff}button.secondary{background:#e9eef6;color:#172033}
main{padding:18px;width:100%;min-width:0;max-width:1600px;margin:0 auto}
.card{background:#fff;border:1px solid #dde4ee;border-radius:12px;padding:18px;margin-bottom:16px;box-shadow:0 2px 8px #16263a0d}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;font-size:14px;font-weight:700;margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid #bcc8d6;border-radius:8px;font-size:16px;background:#fff}
.scan-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{border-bottom:1px solid #e2e8f0;padding:9px;text-align:left;white-space:nowrap}
th{
  background:#edf3fa;
  position:sticky;
  top:0;
  z-index:2;
}
.table-wrap{
  overflow:auto;
  max-height:65vh;
  border:1px solid #e0e6ef;
  border-radius:10px;
}
.muted{color:#667085}.warn{color:#b54708}.good{color:#067647}.kpi{font-size:25px;font-weight:800}
.hidden{display:none!important}.modal{position:fixed;inset:0;background:#0009;z-index:20;display:grid;place-items:center;padding:16px}
.modal-card{width:min(620px,100%);background:#fff;border-radius:14px;padding:16px}.modal-head{display:flex;justify-content:space-between;align-items:center}
.outbound-method-card{max-height:calc(100vh - 32px);overflow-y:auto}
.outbound-summary{margin:12px 0;padding:12px;background:#f5f7fb;border-radius:10px;line-height:1.7}
.outbound-method-fieldset{margin:14px 0;padding:0;border:0}
.outbound-method-fieldset legend{font-size:15px;font-weight:800;margin-bottom:8px}
.outbound-method-option{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:13px;border:1px solid #bcc8d6;border-radius:10px;cursor:pointer}
.outbound-method-option:hover{background:#f1f5fa}
.outbound-method-option input{width:auto;margin:4px 0 0;flex:0 0 auto}
.outbound-method-option span{display:flex;flex-direction:column;gap:4px}
.outbound-method-option small{color:#667085;font-weight:400;line-height:1.5}
.outbound-extra-field{margin-top:12px;padding:12px;border:1px solid #d7e0eb;border-radius:10px;background:#f8fafc}
.outbound-remark-field{margin-top:14px}
.outbound-remark-field textarea{resize:vertical}
.outbound-method-note{line-height:1.6;margin:12px 0 0}
#reader{width:100%;min-height:320px}#toast{position:fixed;right:18px;bottom:18px;background:#172033;color:#fff;padding:12px 16px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:30}
#toast.show{opacity:1}.danger-box{border:1px solid #fda29b;background:#fff4f3}.pill{display:inline-block;padding:3px 8px;border-radius:999px;background:#edf3fa}
@media(max-width:800px){
  header{padding:14px;align-items:flex-start}
  header h1{font-size:19px}
  .mobile-menu-button{display:block;position:sticky;top:0;z-index:10}
  .layout{display:block;min-height:auto}
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    width:min(86vw,320px);
    height:100vh;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:8px 0 24px #0002;
    z-index:12;
    padding-top:16px;
  }
  .sidebar.open{transform:translateX(0)}
  main{padding:10px}
  .card{padding:12px}
  button{padding:12px}
}

.inventory-admin-card{
  margin-bottom:24px;
  border-left:5px solid #1769aa;
}

.inventory-admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.inventory-admin-header h3{
  margin:0 0 6px;
}

.inventory-admin-header p{
  margin:0;
}

.inventory-admin-actions{
  margin-top:0;
  flex-shrink:0;
}

@media(max-width:800px){
  .inventory-admin-header{
    align-items:stretch;
    flex-direction:column;
  }

  .inventory-admin-actions{
    width:100%;
  }

  .inventory-admin-actions button{
    flex:1 1 auto;
  }
}


.inventory-admin-card{
  margin-bottom:28px;
}

.inventory-admin-actions{
  gap:12px;
}

.inventory-result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.inventory-result-header h3{
  margin:0 0 7px;
}

.inventory-result-header button:disabled{
  cursor:not-allowed;
  opacity:.5;
}

@media(max-width:800px){
  .inventory-result-header{
    align-items:stretch;
    flex-direction:column;
  }

  .inventory-result-header button{
    width:100%;
  }
}

#txResult{
  margin-top:18px;
}

.danger-box{
  margin-top:18px;
}


/* 異動紀錄：符合筆數與表格保持距離 */
#txResult .card > .actions:first-child {
  margin-top: 0;
  margin-bottom: 14px;
}

#txResult .pill {
  margin-bottom: 2px;
}


.header-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.current-user{
  background:#ffffff1f;
  padding:8px 12px;
  border-radius:999px;
  font-weight:700;
}

.logout-button{
  padding:8px 12px;
  background:#ffffff;
  color:#173b67;
}

.login-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(10,22,38,.78);
  backdrop-filter:blur(5px);
}

.login-card{
  width:min(440px,100%);
  padding:26px;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

.login-card h2{
  margin:0 0 8px;
  color:#173b67;
}

.login-field{
  margin-top:16px;
}

.login-error{
  min-height:24px;
  margin-top:12px;
  color:#b42318;
  font-weight:700;
}

.login-submit{
  width:100%;
  margin-top:8px;
  padding:13px 16px;
}

/* 手機登入專用：使用鍵盤上方的可見高度，內容不足以容納時可垂直捲動。 */
.login-modal.login-mobile{
  inset:auto 0 auto 0;
  top:var(--login-visible-top,0px);
  height:100vh;
  height:var(--login-visible-height,100dvh);
  display:block;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  padding: max(12px,env(safe-area-inset-top)) 12px max(24px,env(safe-area-inset-bottom));
  scroll-padding-top:12px;
  scroll-padding-bottom:24px;
}
.login-mobile .login-card{
  margin:0 auto;
  padding:20px;
}
.login-mobile .login-field input,
.login-mobile .login-card select{
  font-size:16px;
  min-height:44px;
}
.login-mobile .login-submit{
  min-height:48px;
  font-size:16px;
}

@media(max-width:800px){
  .header-status{
    align-items:flex-end;
    flex-direction:column;
  }

  .current-user{
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}


.system-contact{
  margin:6px 0 0;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  color:#ffffff;
  opacity:.92;
}

@media(max-width:800px){
  .system-contact{
    font-size:12px;
    max-width:260px;
  }
}


.inventory-filter-grid{
  align-items:end;
}

.inventory-filter-grid .scan-row button{
  min-width:48px;
}


.table-wrap table{
  border-collapse:separate;
  border-spacing:0;
}

.table-wrap thead th{
  top:0;
  z-index:3;
}

.table-wrap tbody tr:first-child td{
  position:relative;
  z-index:1;
}



/* 成品／半成品點收：響應式欄位配置 */
.receipt-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.receipt-pallet-field{
  grid-column:span 2;
  min-width:0;
}

.receipt-pallet-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:8px;
  align-items:stretch;
  min-width:0;
}

.receipt-pallet-row #rPallet{
  width:100%;
  min-width:0;
  font-family:Consolas,"Microsoft JhengHei",monospace;
  letter-spacing:.02em;
}

.receipt-pallet-button{
  min-width:110px;
  white-space:nowrap;
}

.receipt-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:14px 0 18px;
}

.receipt-step{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:70px;
  padding:12px;
  border:1px solid #cbd9e8;
  border-radius:12px;
  background:#f7faff;
  color:#173b67;
}

.receipt-step strong{
  display:grid;
  flex:0 0 34px;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:50%;
  background:#1769aa;
  color:#fff;
  font-size:18px;
}

.receipt-step span{
  font-weight:800;
  line-height:1.4;
}

.receipt-scan-panel{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:12px;
  margin-bottom:18px;
  padding:16px;
  border:2px solid #1769aa;
  border-radius:14px;
  background:#eef6ff;
}

.receipt-scan-input{
  min-height:52px;
  border-width:2px;
  border-color:#1769aa;
  font-family:Consolas,"Microsoft JhengHei",monospace;
  font-size:18px;
  font-weight:800;
}

.receipt-scan-state{
  display:flex;
  justify-content:center;
  flex-direction:column;
  min-height:76px;
  padding:12px 16px;
  border-radius:10px;
  font-size:17px;
  font-weight:800;
}

.receipt-scan-state span{
  margin-top:4px;
  font-size:13px;
  font-weight:600;
}

.receipt-scan-state.waiting{background:#fff4e5;color:#8a4b08}
.receipt-scan-state.active{background:#dcfae6;color:#067647}
.receipt-scan-state.mismatch{background:#fff1f0;color:#b42318;box-shadow:inset 0 0 0 2px #f04438}

@media(max-width:1100px){
  .receipt-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .receipt-pallet-field{
    grid-column:span 1;
  }
}

@media(max-width:800px){
  .receipt-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .receipt-scan-panel{
    grid-template-columns:minmax(0,1fr);
    padding:12px;
  }

  .receipt-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .receipt-pallet-field{
    grid-column:span 1;
  }

  .receipt-pallet-row{
    grid-template-columns:minmax(0,1fr);
  }

  .receipt-pallet-button{
    width:100%;
    min-width:0;
  }

  .receipt-pallet-row #rPallet{
    min-height:50px;
    font-size:16px;
  }
}

/* 2026-09-04 換包裝回庫位置提示 */
.repack-return-location{
  margin:12px 0 18px;
  padding:14px 16px;
  border:2px solid #d0d5dd;
  border-radius:10px;
  background:#f9fafb;
}
.repack-return-title{font-weight:800;font-size:16px;margin-bottom:6px}
.repack-return-value{font-weight:900;font-size:20px;line-height:1.5;margin-bottom:4px}


/* 庫存查詢第二列：狀態與多批號並排，小螢幕改為上下排列。 */
.inventory-extra-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,5fr);gap:12px;margin-top:12px;align-items:start}
.inventory-multi-lot-field textarea{resize:vertical}
.inventory-multi-lot-field .muted{margin:6px 0 0}
@media(max-width:800px){.inventory-extra-filters{grid-template-columns:minmax(0,1fr)}}