@layer pages {
[data-page="stockout"] .so-photo { width: 44px; height: 44px; border-radius: var(--r-md); object-fit: cover; display: block; cursor: zoom-in; transition: transform .12s; }
[data-page="stockout"] .so-photo:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
/* 已領出頁專用 outbound dashboard（僅 stockout-content scope） */
[data-page="stockout"] .stockout-content {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 24px 28px 48px;
  background: var(--c-surface-2);
}
[data-page="stockout"] .stockout-content .stockout-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
[data-page="stockout"] .stockout-content .stockout-heading-copy { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
[data-page="stockout"] .stockout-content .stockout-heading-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--c-warning-soft); color: var(--c-warning); font-size: var(--fs-20); }
[data-page="stockout"] .stockout-content .stockout-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="stockout"] .stockout-content .stockout-page-header p { margin: 6px 0 0; color: var(--c-muted); font-size: var(--fs-14); line-height: 1.5; }
[data-page="stockout"] .stockout-content .stockout-filter-bar { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 850px; }
[data-page="stockout"] .stockout-content .stockout-filter-field { display: flex; flex-direction: column; gap: 4px; color: var(--c-muted); font-size: var(--fs-11); font-weight: var(--fw-medium); }
[data-page="stockout"] .stockout-content .stockout-filter-field input { width: 132px; height: 40px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-white); color: var(--c-text); font-size: var(--fs-13); }
[data-page="stockout"] .stockout-content .stockout-filter-field 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="stockout"] .stockout-content .stockout-filter-field.search input { width: 265px; }
[data-page="stockout"] .stockout-content .stockout-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr));}

[data-page="stockout"] .stockout-content .stockout-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--c-muted); font-size: var(--fs-13); }
[data-page="stockout"] .stockout-content .stockout-toolbar strong { color: var(--c-text-2); }
[data-page="stockout"] .stockout-content .stockout-date-group { margin-bottom: 16px; overflow: hidden; 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="stockout"] .stockout-content .stockout-date-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 18px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text-2); }
[data-page="stockout"] .stockout-content .stockout-date-title { font-size: var(--fs-14); font-weight: var(--fw-bold); }
[data-page="stockout"] .stockout-content .stockout-date-summary { color: var(--c-muted); font-size: var(--fs-13); }
[data-page="stockout"] .stockout-content table.stockout-table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; }
[data-page="stockout"] .stockout-content table.stockout-table .stockout-col-photo { width: 80px; }
[data-page="stockout"] .stockout-content table.stockout-table .stockout-col-item, [data-page="stockout"] .stockout-content table.stockout-table .stockout-col-qty, [data-page="stockout"] .stockout-content table.stockout-table .stockout-col-destination, [data-page="stockout"] .stockout-content table.stockout-table .stockout-col-actions { width: 25%; }
[data-page="stockout"] .stockout-content table.stockout-table th { height: 44px; padding: 0 14px; background: var(--c-white); color: var(--c-muted); font-size: var(--fs-12); font-weight: var(--fw-medium); text-align: left; white-space: nowrap; }
[data-page="stockout"] .stockout-content table.stockout-table td { min-height: 78px; padding: 10px 14px; border-top: 1px solid var(--c-border); color: var(--c-text-2); font-size: var(--fs-13); vertical-align: middle; }
[data-page="stockout"] .stockout-content table.stockout-table tr:hover td { background: var(--c-white); }
[data-page="stockout"] .stockout-content table.stockout-table tr.is-return td { background: var(--c-success-soft); }
[data-page="stockout"] .stockout-content table.stockout-table tr.is-reverted td { opacity: .72; }
[data-page="stockout"] .stockout-content .stockout-photo { width: 52px; height: 52px; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface-2); object-fit: cover; }
[data-page="stockout"] .stockout-content .stockout-photo-empty { display: grid; place-items: center; color: var(--c-border-control); font-size: var(--fs-16); }
[data-page="stockout"] .stockout-content .stockout-item-name { color: var(--c-text); font-size: var(--fs-14); font-weight: var(--fw-bold); }
[data-page="stockout"] .stockout-content .stockout-item-meta { display: block; margin-top: 4px; color: var(--c-primary); font-size: var(--fs-12); font-weight: var(--fw-medium); }
[data-page="stockout"] .stockout-content .stockout-note { display: block; margin-top: 4px; color: var(--c-muted); font-size: var(--fs-12); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
[data-page="stockout"] .stockout-content .stockout-qty { white-space: nowrap; font-size: var(--fs-14); font-weight: var(--fw-bold); }
[data-page="stockout"] .stockout-content .stockout-qty.qty-neg { color: var(--c-danger); }
[data-page="stockout"] .stockout-content .stockout-qty.qty-pos { color: var(--c-success); }
[data-page="stockout"] .stockout-content .stockout-destination { display: inline-flex; flex-wrap: wrap; gap: 5px; }
[data-page="stockout"] .stockout-content .stockout-destination-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-primary-soft); color: var(--c-primary); font-size: var(--fs-12); }
[data-page="stockout"] .stockout-content .stockout-destination-badge.return-location { background: var(--c-warning-soft); color: var(--c-warning); }
[data-page="stockout"] .stockout-content .stockout-returned-badge { display: inline-flex; margin-left: 6px; padding: 3px 8px; border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success); font-size: var(--fs-11); font-weight: var(--fw-bold); }
[data-page="stockout"] .stockout-content .stockout-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 280px; }
[data-page="stockout"] .stockout-content .stockout-actions button { flex: 1 1 0; min-width: 0; }
[data-page="stockout"] .stockout-content .stockout-empty-state { padding: 64px 20px; border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); background: var(--c-white); color: var(--c-muted); text-align: center; }
[data-page="stockout"] .stockout-content .stockout-empty-state .empty-icon { display: block; margin-bottom: 10px; font-size: var(--fs-28); }
[data-page="stockout"] .stockout-content .stockout-empty-state strong { display: block; color: var(--c-text-2); font-size: var(--fs-16); }
[data-page="stockout"] .stockout-content .stockout-empty-state p { margin: 6px 0 18px; font-size: var(--fs-13); }
[data-page="stockout"] .stockout-content .stockout-error-state { padding: 56px 20px; border: 1px solid var(--c-danger-border); border-radius: var(--r-lg); background: var(--c-white); color: var(--c-danger); text-align: center; }
[data-page="stockout"] .stockout-content .stockout-error-state p { margin: 8px 0 18px; color: var(--c-muted); font-size: var(--fs-13); }
@media (max-width: 1440px) {
  [data-page="stockout"] .stockout-content { padding: 24px 24px 40px; }
  [data-page="stockout"] .stockout-content .stockout-page-header { gap: 14px; }
  [data-page="stockout"] .stockout-content .stockout-filter-field.search input { width: 220px; }
}
@media (max-width: 1200px) {
  [data-page="stockout"] .stockout-content .stockout-page-header { flex-direction: column; }
  [data-page="stockout"] .stockout-content .stockout-filter-bar { justify-content: flex-start; max-width: none; }
  [data-page="stockout"] .stockout-content .stockout-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  [data-page="stockout"] .stockout-content { padding: 16px 14px 92px; }
  [data-page="stockout"] .stockout-content .stockout-page-header h1 { font-size: var(--fs-20); }
  [data-page="stockout"] .stockout-content .stockout-page-header p { font-size: var(--fs-12); }
  [data-page="stockout"] .stockout-content .stockout-filter-bar { width: 100%; align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  [data-page="stockout"] .stockout-content .stockout-filter-field input, [data-page="stockout"] .stockout-content .stockout-filter-field.search input { width: 100%; }
  [data-page="stockout"] .stockout-content .stockout-filter-field.search { grid-column: 1 / -1; }
  [data-page="stockout"] .stockout-content .stockout-filter-action { width: 100%; }

  [data-page="stockout"] .stockout-content .stockout-toolbar { align-items: flex-start; flex-direction: column; }
  [data-page="stockout"] .stockout-content .stockout-date-header { align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 14px; }
  [data-page="stockout"] .stockout-content .stockout-date-title { font-size: var(--fs-14); }
  [data-page="stockout"] .stockout-content .stockout-date-summary { font-size: var(--fs-12); }
  [data-page="stockout"] .stockout-content table.stockout-table { min-width: 760px; }
  [data-page="stockout"] .stockout-content .stockout-actions { min-width: 220px; }
  [data-page="stockout"] .stockout-content .m-card { border-color: var(--c-border); box-shadow: none; }
  [data-page="stockout"] .stockout-content .m-card.is-return { background: var(--c-success-soft); border-color: var(--c-success-border); }
}

[data-page="stockout"] .stockout-content table.stockout-table tr.is-reverted-return td { background: var(--c-surface-2); }
[data-page="stockout"] .stockout-content .stockout-returned-badge.revoked { background: var(--c-border); color: var(--c-muted); }
[data-page="stockout"] .stockout-content .stockout-qty.is-revoked { color: var(--c-muted); text-decoration: line-through; }
[data-page="stockout"] .stockout-content .stockout-loading { min-height: 180px; display: grid; place-items: center; color: var(--c-muted); font-size: var(--fs-14); }
}