@layer pages {

  /* 盤點輸入表 tab 切換（2026-08-13：整組 / 單一材料分開） */
  [data-page="stocktake"] .stk-tabs { display: flex; gap: 8px; background: var(--c-surface-2); border-radius: var(--r-lg); padding: 4px; margin: 12px 0; }
  [data-page="stocktake"] .stk-tab { flex: 1; }
  [data-page="stocktake"] .stk-tab span { display: block; font-size: var(--fs-11); font-weight: var(--fw-regular); opacity: 0.7; margin-top: 1px; }
  [data-page="stocktake"] .stk-tab.is-active span { opacity: 0.85; }
  [data-page="stocktake"] .st-diff { font-size: var(--fs-13); font-weight: var(--fw-medium); text-align: center; }
  [data-page="stocktake"] .st-diff.pos { color: var(--c-success); }
  [data-page="stocktake"] .st-diff.neg { color: var(--c-danger); }
  [data-page="stocktake"] .st-diff.zero { color: var(--c-border-control); }
/* 盤點頁專用 desktop dashboard（僅 stocktake-content scope） */
[data-page="stocktake"] .stocktake-content {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  background: var(--c-surface-2);
}
[data-page="stocktake"] .stocktake-content .stocktake-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
[data-page="stocktake"] .stocktake-content .stocktake-heading-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
[data-page="stocktake"] .stocktake-content .stocktake-heading-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-20);
}
[data-page="stocktake"] .stocktake-content .stocktake-page-header h1 { margin: 0; color: var(--c-text); font-size: var(--fs-28); line-height: 1.2; font-weight: var(--fw-bold); }
[data-page="stocktake"] .stocktake-content .stocktake-page-header p { margin: 6px 0 0; color: var(--c-muted); font-size: var(--fs-14); line-height: 1.5; }
[data-page="stocktake"] .stocktake-content .stocktake-date { flex: none; padding: 9px 12px; border: 1px solid var(--c-primary-soft); border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr));}

[data-page="stocktake"] .stocktake-content button.stocktake-kpi-card { width: 100%; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
[data-page="stocktake"] .stocktake-content button.stocktake-kpi-card:hover { border-color: var(--c-border-control); box-shadow: 0 4px 12px rgba(15,23,42,.06); }

[data-page="stocktake"] .stocktake-content .stocktake-loading { min-height: 180px; display: grid; place-items: center; color: var(--c-muted); font-size: var(--fs-14); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-card, [data-page="stocktake"] .stocktake-content .stocktake-info-panel, [data-page="stocktake"] .stocktake-content .stocktake-readonly-panel {
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
[data-page="stocktake"] .stocktake-content .stocktake-summary-heading, [data-page="stocktake"] .stocktake-content .stocktake-current-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--c-text-2); font-size: var(--fs-14); font-weight: var(--fw-bold); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-date { color: var(--c-primary); font-size: var(--fs-13); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-metrics { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 14px; color: var(--c-muted); font-size: var(--fs-13); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-metrics b { margin-left: 4px; color: var(--c-text-2); font-size: var(--fs-16); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-metrics b.is-positive { color: var(--c-success); }
[data-page="stocktake"] .stocktake-content .stocktake-summary-metrics b.is-negative { color: var(--c-danger); }
[data-page="stocktake"] .stocktake-content .stocktake-info-panel { border-color: var(--c-primary-soft); background: var(--c-primary-soft); color: var(--c-text-2); font-size: var(--fs-13); line-height: 1.7; }
[data-page="stocktake"] .stocktake-content .stocktake-info-title { margin-bottom: 4px; color: var(--c-primary); font-weight: var(--fw-bold); }
[data-page="stocktake"] .stocktake-content .stocktake-current-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 12px; }
[data-page="stocktake"] .stocktake-content .stocktake-current-date { color: var(--c-muted); font-size: var(--fs-13); }
[data-page="stocktake"] .stocktake-content .stocktake-history { margin-bottom: 18px; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-white); }
[data-page="stocktake"] .stocktake-content .stocktake-history table { width: 100%; border-collapse: collapse; min-width: 520px; }
[data-page="stocktake"] .stocktake-content .stocktake-history th, [data-page="stocktake"] .stocktake-content .stocktake-history td { padding: 11px 14px; border-bottom: 1px solid var(--c-border); text-align: left; font-size: var(--fs-13); }
[data-page="stocktake"] .stocktake-content .stocktake-history th { background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-12); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-history tr:last-child td { border-bottom: none; }
[data-page="stocktake"] .stocktake-content .stocktake-tabs, [data-page="stocktake"] .stocktake-content .stk-tabs { display: flex; gap: 6px; margin: 12px 0 14px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-2); }
[data-page="stocktake"] .stocktake-content .stocktake-tab, [data-page="stocktake"] .stocktake-content .stk-tab { flex: 1; }
[data-page="stocktake"] .stocktake-content .stocktake-tab span, [data-page="stocktake"] .stocktake-content .stk-tab span { margin-left: 6px; color: var(--c-border-control); font-size: var(--fs-11); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-location-group { margin-bottom: 14px; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-white); }
[data-page="stocktake"] .stocktake-content .stocktake-location-header { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 16px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); font-size: var(--fs-13); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-location-count { padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-border); color: var(--c-text-2); font-size: var(--fs-11); }
[data-page="stocktake"] .stocktake-content .stocktake-table-wrap { overflow-x: auto; }
[data-page="stocktake"] .stocktake-content table.stocktake-table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
[data-page="stocktake"] .stocktake-content table.stocktake-table .stocktake-col-item { width: auto; }
[data-page="stocktake"] .stocktake-content table.stocktake-table .stocktake-col-system { width: 120px; }
[data-page="stocktake"] .stocktake-content table.stocktake-table .stocktake-col-actual { width: 120px; }
[data-page="stocktake"] .stocktake-content table.stocktake-table .stocktake-col-diff { width: 100px; }
[data-page="stocktake"] .stocktake-content table.stocktake-table th { height: 44px; padding: 0 16px; background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-12); font-weight: var(--fw-medium); text-align: left; white-space: nowrap; }
[data-page="stocktake"] .stocktake-content table.stocktake-table td { min-height: 72px; padding: 10px 16px; border-top: 1px solid var(--c-border); color: var(--c-text-2); font-size: var(--fs-13); vertical-align: middle; }
[data-page="stocktake"] .stocktake-content table.stocktake-table tr:hover td { background: var(--c-white); }
[data-page="stocktake"] .stocktake-content table.stocktake-table .cphoto { width: 48px; height: 48px; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); }
[data-page="stocktake"] .stocktake-content table.stocktake-table .cphoto img { width: 100%; height: 100%; object-fit: cover; }
[data-page="stocktake"] .stocktake-content table.stocktake-table td:first-child { min-width: 320px; }
[data-page="stocktake"] .stocktake-content .stocktake-input { width: 100px; height: 38px; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); color: var(--c-text); font-size: var(--fs-14); text-align: center; }
[data-page="stocktake"] .stocktake-content .stocktake-input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 12%, transparent); }
[data-page="stocktake"] .stocktake-content .stocktake-input.is-changed { border-color: var(--c-out-solid); background: var(--c-out-soft); }
[data-page="stocktake"] .stocktake-content .st-diff { font-size: var(--fs-14); font-weight: var(--fw-bold); }
[data-page="stocktake"] .stocktake-content .st-diff.pos { color: var(--c-success); }
[data-page="stocktake"] .stocktake-content .st-diff.neg { color: var(--c-danger); }
[data-page="stocktake"] .stocktake-content .st-diff.zero { color: var(--c-muted); }
[data-page="stocktake"] .stocktake-content .stocktake-submit { width: 100%; margin-top: 16px; }
[data-page="stocktake"] .stocktake-content .stocktake-item-cell { display: flex; align-items: center; gap: 12px; min-width: 300px; }
[data-page="stocktake"] .stocktake-content .stocktake-item-cell > span:last-child { min-width: 0; }
[data-page="stocktake"] .stocktake-content .stocktake-item-cell b { display: block; color: var(--c-text); font-size: var(--fs-14); }
[data-page="stocktake"] .stocktake-content .stocktake-item-cell small { display: block; margin-top: 4px; color: var(--c-muted); font-size: var(--fs-12); }
[data-page="stocktake"] .stocktake-content .stocktake-system-qty { color: var(--c-text-2); font-weight: var(--fw-medium); white-space: nowrap; }
[data-page="stocktake"] .stocktake-content .st-diff.pending { color: var(--c-border-control); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-error-state { padding: 56px 20px; border: 1px solid var(--c-danger-border); border-radius: var(--r-lg); background: var(--c-white); text-align: center; }
[data-page="stocktake"] .stocktake-content .stocktake-error-state h2 { color: var(--c-danger); font-size: var(--fs-16); }
[data-page="stocktake"] .stocktake-content .stocktake-error-state p { margin: 8px 0 18px; color: var(--c-muted); font-size: var(--fs-13); }
@media (max-width: 1440px) {
  [data-page="stocktake"] .stocktake-content { padding: 24px 24px 40px; }
}
@media (max-width: 1200px) {
  [data-page="stocktake"] .stocktake-content .stocktake-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  [data-page="stocktake"] .stocktake-content { padding: 16px 14px 92px; }
  [data-page="stocktake"] .stocktake-content .stocktake-page-header { gap: 14px; flex-direction: column; }
  [data-page="stocktake"] .stocktake-content .stocktake-page-header h1 { font-size: var(--fs-20); }
  [data-page="stocktake"] .stocktake-content .stocktake-page-header p { font-size: var(--fs-12); }
  [data-page="stocktake"] .stocktake-content .stocktake-date { align-self: flex-start; }

  [data-page="stocktake"] .stocktake-content .stocktake-summary-metrics { gap: 12px 18px; }
  [data-page="stocktake"] .stocktake-content table.stocktake-table th, [data-page="stocktake"] .stocktake-content table.stocktake-table td { padding-left: 10px; padding-right: 10px; }
}

[data-page="stocktake"] .stocktake-content .stocktake-material-row td { background: var(--c-surface-2); }
[data-page="stocktake"] .stocktake-content .stocktake-material-row td:first-child { padding-left: 60px; }
[data-page="stocktake"] .stocktake-content .stocktake-material-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
[data-page="stocktake"] .stocktake-content .stocktake-material-indent { flex: 0 0 16px; color: var(--c-border-control); font-size: var(--fs-16); }
[data-page="stocktake"] .stocktake-content .stocktake-material-photo { width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--r-sm); overflow: hidden; background: var(--c-surface-2); }
[data-page="stocktake"] .stocktake-content .stocktake-material-photo img { width: 100%; height: 100%; object-fit: cover; }
[data-page="stocktake"] .stocktake-content .stocktake-material-cell b { display: block; color: var(--c-text-2); font-size: var(--fs-13); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-material-cell small { display: block; margin-top: 3px; color: var(--c-muted); font-size: var(--fs-11); }
[data-page="stocktake"] .stocktake-content .stocktake-material-cell .stocktake-model, [data-page="stocktake"] .stocktake-content .stocktake-item-cell .stocktake-model { color: var(--c-primary); font-weight: var(--fw-medium); }
[data-page="stocktake"] .stocktake-content .stocktake-material-need { color: var(--c-muted); }
[data-page="stocktake"] .stocktake-content .stocktake-material-system-qty { color: var(--c-text-2); font-weight: var(--fw-medium); white-space: nowrap; }
[data-page="stocktake"] .stocktake-content .stocktake-material-row .stocktake-input { width: 100px; }
[data-page="stocktake"] .stocktake-content .stocktake-material-diff { font-size: var(--fs-14); font-weight: var(--fw-bold); }
@media (max-width: 767px) {
  [data-page="stocktake"] .stocktake-content .stocktake-current-header { align-items: center; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; justify-content: space-between; }
  [data-page="stocktake"] .stocktake-content .stocktake-current-heading { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
  [data-page="stocktake"] .stocktake-content table.stocktake-table { width: 100%; min-width: 680px; table-layout: fixed; }
  [data-page="stocktake"] .stocktake-content .stocktake-table .stocktake-col-item { width: 42%; }
  [data-page="stocktake"] .stocktake-content .stocktake-table .stocktake-col-system, [data-page="stocktake"] .stocktake-content .stocktake-table .stocktake-col-actual, [data-page="stocktake"] .stocktake-content .stocktake-table .stocktake-col-diff { width: 19.333%; }
  [data-page="stocktake"] .stocktake-content .stocktake-input { width: 100%; max-width: 86px; box-sizing: border-box; }
}
}