/* ================================================================
   ERP — App-level styles (built on top of tokens.css)
   Density + sizing controlled by data attributes set by Tweaks.
   ================================================================ */

* { box-sizing: border-box; }

/* ── Density scaling ───────────────────────────────────────────── */
[data-density='compact'] {
  --d-row-h: 32px;
  --d-cell-py: 6px;
  --d-cell-px: 10px;
  --d-card-pad: 14px;
  --d-gap: 10px;
  --d-section-gap: 16px;
}
[data-density='regular'] {
  --d-row-h: 40px;
  --d-cell-py: 10px;
  --d-cell-px: 14px;
  --d-card-pad: 18px;
  --d-gap: 14px;
  --d-section-gap: 20px;
}
[data-density='comfy'] {
  --d-row-h: 52px;
  --d-cell-py: 14px;
  --d-cell-px: 18px;
  --d-card-pad: 24px;
  --d-gap: 18px;
  --d-section-gap: 28px;
}

/* Default */
.erp-root {
  --d-row-h: 40px;
  --d-cell-py: 10px;
  --d-cell-px: 14px;
  --d-card-pad: 18px;
  --d-gap: 14px;
  --d-section-gap: 20px;
  font-size: var(--kx-app-font-size, 13px);
  font-family: var(--font-tc), var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: 0;
}

.erp-shell {
  width: 100%;
  min-width: 0;
}
.erp-main,
.erp-page-scroll {
  min-width: 0;
}
.erp-page-scroll {
  scrollbar-gutter: stable;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: var(--fw-medium) 1em/1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-hover); }
.btn:active { transform: scale(0.98); }
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.btn--primary {
  background: var(--primary); border-color: var(--primary);
  color: var(--fg-on-primary);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--surface-hover); }
.btn--danger { color: var(--danger); border-color: var(--border); }
.btn--danger:hover { background: var(--danger-soft); }
.btn--sm { height: 28px; padding: 0 10px; font-size: 0.923em; }
.btn--icon { width: 32px; padding: 0; }
.btn--lg { height: 40px; padding: 0 18px; font-size: 1.077em; }

/* ── Input ─────────────────────────────────────────────────────── */
.input {
  height: 32px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: 1em/1 var(--font-sans);
  outline: none;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
  width: 100%;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.input::placeholder { color: var(--fg-subtle); }

/* ── Phrase picker ─────────────────────────────────────────────── */
.kx-phrase-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  line-height: 1;
}
.kx-phrase-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.kx-phrase-trigger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-phrase-trigger-text--placeholder { color: var(--fg-subtle); }
.kx-phrase-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  overflow-y: auto;
}
.kx-phrase-menu-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kx-phrase-menu-item {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  padding: 7px 8px;
  font: 1em/1.25 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.kx-phrase-menu-item:hover { background: var(--surface-hover); }
.kx-phrase-menu-item:disabled {
  color: var(--fg-subtle);
  cursor: not-allowed;
  background: transparent;
}
.kx-phrase-menu-item--selected {
  background: var(--primary-soft);
  color: var(--primary-press);
  font-weight: var(--fw-medium);
}
.kx-phrase-menu-item--danger { color: var(--danger); }
.kx-phrase-menu-icon {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}
.kx-phrase-menu-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--divider);
}
.kx-phrase-menu-empty {
  padding: 9px 8px;
  color: var(--fg-muted);
  font-size: 12px;
}
.kx-phrase-mobile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.28);
  padding: 12px;
}
.kx-phrase-mobile-sheet {
  width: 100%;
  max-height: min(76vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
}
.kx-phrase-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 8px;
}
.kx-phrase-mobile-list {
  min-height: 80px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Mobile sort pill + bottom sheet ──────────────────────────── */
.m-sort-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);
}
.m-sort-pill:active { background: var(--surface-hover); }
.m-sort-pill:disabled { opacity: 0.5; cursor: not-allowed; }
.m-sort-pill--active {
  background: var(--primary-soft);
  color: var(--primary-press, var(--primary));
  border-color: var(--primary-soft);
}
.m-sort-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3300;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.28);
  padding: 12px;
}
.m-sort-sheet {
  width: 100%;
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
}
.m-sort-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 8px;
}
.m-sort-sheet-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-sort-sheet-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-micro);
}
.m-sort-sheet-item:active { background: var(--surface-hover); }
.m-sort-sheet-item--selected {
  background: var(--primary-soft);
  color: var(--primary-press, var(--primary));
  font-weight: var(--fw-medium);
}

/* ── Card ──────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--d-card-pad);
}
.card--inset {
  border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-md);
}

/* ── Table ─────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 1em; }
.tbl thead th {
  text-align: left;
  padding: var(--d-cell-py) var(--d-cell-px);
  font-weight: var(--fw-medium); font-size: 0.923em;
  color: var(--fg-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.tbl tbody td {
  padding: var(--d-cell-py) var(--d-cell-px);
  border-bottom: 1px solid var(--divider);
  color: var(--fg);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl tbody tr { transition: background var(--dur-micro); }
.tbl tbody tr:hover { background: var(--surface-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.tbl .right { text-align: right; }
.tbl .center { text-align: center; }
.tbl .strong { color: var(--fg-strong); font-weight: var(--fw-medium); }
.tbl .mono { font-family: var(--font-mono); font-size: 0.923em; color: var(--fg-muted); }
.tbl .neg { color: var(--danger); }

/* ── Sortable table header ─────────────────────────────────────── */
.tbl thead th.sortable {
  padding: 0;
  transition: color var(--dur-micro);
}
.tbl thead th.sortable.is-active {
  color: var(--primary-press, var(--primary));
}
.tbl thead th.sortable .sortable-btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--d-cell-py) var(--d-cell-px);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-micro), color var(--dur-micro);
}
.tbl thead th.sortable .sortable-btn:hover {
  background: var(--surface-3, var(--surface-hover));
  color: var(--fg-strong);
}
.tbl thead th.sortable .sortable-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.tbl thead th.sortable.right .sortable-btn { justify-content: flex-end; text-align: right; }
.tbl thead th.sortable.center .sortable-btn { justify-content: center; text-align: center; }
.tbl thead th.sortable.right .sortable-label { justify-content: flex-end; }
.tbl thead th.sortable.center .sortable-label { justify-content: center; }
.tbl thead th.sortable .sortable-label {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%;
}
.tbl thead th.sortable .sort-ind {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  color: var(--fg-subtle, var(--fg-muted));
  opacity: 0.55;
  transition: color var(--dur-micro), opacity var(--dur-micro);
  font-family: var(--font-num);
}
.tbl thead th.sortable .sort-ind--active {
  color: var(--primary);
  opacity: 1;
}
.sort-scope-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  border-left: 1px solid var(--divider);
  margin-left: 8px;
}

/* ── Chips / badges ────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 12px; font-weight: var(--fw-medium); line-height: 1.5;
  white-space: nowrap;
}
.chip-dot { width: 6px; height: 6px; border-radius: 999px; }
.chip--success { background: var(--success-50); color: var(--success-700); }
.chip--success .chip-dot { background: var(--success-500); }
.chip--danger  { background: var(--danger-50);  color: var(--danger-700); }
.chip--danger .chip-dot { background: var(--danger-500); }
.chip--warning { background: var(--warning-50); color: var(--warning-700); }
.chip--warning .chip-dot { background: var(--warning-500); }
.chip--info    { background: var(--info-50);    color: var(--info-700); }
.chip--info .chip-dot { background: var(--info-500); }
.chip--neutral { background: var(--surface-2); color: var(--fg-muted); border: 1px solid var(--border); }
.chip--neutral .chip-dot { background: var(--fg-subtle); }
.chip--primary { background: var(--primary-soft); color: var(--primary-press); }
.chip--primary .chip-dot { background: var(--primary); }

/* ── KPI tile ──────────────────────────────────────────────────── */
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--d-card-pad);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  overflow: hidden;
}
.kpi-label { font-size: 12px; color: var(--fg-muted); font-weight: var(--fw-medium); }
.kpi-value {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: var(--fw-semibold);
  color: var(--fg-strong); line-height: 1.1;
}
.kpi-delta { font-size: 12px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.kpi-delta--up   { color: var(--success-700); }
.kpi-delta--down { color: var(--danger);  }
.kpi-spark { height: 28px; margin-top: -4px; }

/* ── Section header ────────────────────────────────────────────── */
.section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.section-h h3 {
  margin: 0;
  font-size: 14px; font-weight: var(--fw-semibold);
  color: var(--fg-strong);
}
.section-h .meta { font-size: 12px; color: var(--fg-muted); }

/* ── Side nav（對齊「廣訊網 ERP」參考版：常用釘選 + 分組浮顯飛出選單）──
   色票直接用全域 token，以 --admin-* 別名收斂。
   ⚠ .snav / .snav-body 不可用 overflow:auto/hidden — 會 clip .snav-flyout 浮顯子選單。 */
.snav {
  --admin-primary: var(--primary);
  --admin-primary-strong: var(--primary-hover);
  --admin-primary-light: var(--primary-soft);
  --admin-bg: var(--bg);
  --admin-surface: var(--surface);
  --admin-text: var(--fg);
  --admin-muted: var(--fg-muted);
  --admin-border: var(--border);
  --admin-radius: var(--radius-md);
  position: relative;
  z-index: 40;
  overflow: visible;
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--admin-surface);
  border-right: 1px solid var(--admin-border);
}
.snav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  box-sizing: border-box;
  padding: 0 16px;
  border-bottom: 1px solid var(--admin-border);
  flex-shrink: 0;
  overflow: hidden;
}
.snav-brand .brand-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.snav-brand .name {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong);
  line-height: 1.2;
}
.snav-brand .name small {
  font-size: 12px;
  font-weight: 400;
  color: var(--admin-muted);
  margin-top: 1px;
}
/* body 可垂直捲動（避免分組過多時底部模組溢出不可達）；flyout 用 position:fixed
   逃離此捲動裁切，故水平方向不會被 clip。min-height:0 讓 flex 子項可收縮捲動。 */
.snav-body { flex: 1; min-height: 0; padding: 6px 8px; overflow-y: auto; overflow-x: hidden; }
.snav-dashboard { margin-top: 0; margin-bottom: 2px; }
.snav-block { margin-top: 6px; }
.snav-subsection {
  padding: 8px 8px 2px;
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* 常用（可自訂釘選）區塊 */
.snav-subsection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 2px 8px;
}
.snav-subsection-row .snav-subsection { padding: 0; }
.snav-section-action {
  width: 22px; height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--admin-radius);
  border: 0;
  background: transparent;
  color: var(--admin-muted);
  cursor: pointer;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.snav-section-action:hover { background: var(--admin-primary-light); color: var(--admin-primary); }
.snav-section-action svg { display: block; }
.snav-fav-item {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--admin-radius);
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s;
  margin-top: 1px;
  font-family: inherit;
  position: relative;
  padding-right: 28px;
}
.snav-fav-item:hover { background: var(--admin-primary-light); color: var(--admin-primary); }
.snav-fav-item.active {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  border-left: 3px solid var(--admin-primary);
  font-weight: 600;
}
.snav-fav-star {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #f59e0b;
  flex-shrink: 0;
}
.snav-fav-star svg { display: block; }
.snav-fav-remove {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--fg-subtle);
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
  cursor: pointer;
}
.snav-fav-item:hover .snav-fav-remove { opacity: 1; }
.snav-fav-remove:hover { background: var(--surface-hover); color: var(--danger); }
.snav-fav-remove svg { display: block; }
/* sidebar 子項 ★/☆ pin toggle（hover 顯示，釘選後恆顯示） */
.snav-flyout .snav-item { position: relative; padding-right: 28px; }
.snav-pin-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--admin-muted);
  opacity: 0;
  transition: opacity .15s, color .15s, background .15s;
  cursor: pointer;
}
.snav-flyout .snav-item:hover .snav-pin-toggle,
.snav-pin-toggle.is-pinned { opacity: 1; }
.snav-pin-toggle.is-pinned { color: #f59e0b; }
.snav-pin-toggle:hover { background: var(--surface-hover); color: #f59e0b; }
.snav-pin-toggle svg { display: block; }
/* 自訂常用 modal */
.fav-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(28, 25, 23, 0.45);
  display: grid; place-items: center;
  z-index: 1000;
  padding: 24px;
}
.fav-modal-card {
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 16px 48px rgba(28, 25, 23, 0.24);
  overflow: hidden;
}
.fav-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.fav-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--fg-strong); }
.fav-modal-head .sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.fav-modal-body { padding: 16px 20px; overflow: auto; }
.fav-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.fav-modal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.fav-modal-group {
  grid-column: 1 / -1;
  padding: 12px 0 4px;
  font-size: 11px;
  color: var(--fg-subtle);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.fav-modal-group:first-child { padding-top: 0; }
.fav-modal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.fav-modal-row:hover { background: var(--surface-hover); }
.fav-modal-row input { accent-color: var(--primary); cursor: pointer; margin: 0; }
.fav-modal-name { font-size: 13px; color: var(--fg); }
.snav-group { position: relative; margin-top: 1px; }
.snav-group-head {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--admin-radius);
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, color .2s;
}
.snav-group-head:hover,
.snav-group:focus-within .snav-group-head,
.snav-group:hover .snav-group-head {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}
.snav-group-head.active {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  border-left: 3px solid var(--admin-primary);
  font-weight: 600;
}
.nav-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  border-radius: 4px;
  background: var(--admin-bg);
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
  transition: background .2s, color .2s;
}
.nav-icon svg { display: block; }
.snav-group-head:hover .nav-icon,
.snav-group:hover .snav-group-head .nav-icon,
.snav-group-head.active .nav-icon,
.snav-dashboard:hover .nav-icon,
.snav-dashboard.active .nav-icon {
  background: var(--admin-primary);
  color: #fff;
}
.snav-group-head .chev {
  margin-left: auto;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  position: relative;
}
.snav-group-head .chev::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--admin-muted);
  border-top: 1.5px solid var(--admin-muted);
  transform: translate(-65%, -50%) rotate(45deg);
  transition: border-color .2s;
}
.snav-group:hover .snav-group-head .chev::before,
.snav-group:focus-within .snav-group-head .chev::before,
.snav-group-head.active .chev::before { border-color: var(--admin-primary); }
.snav button.snav-item {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.snav-dashboard.snav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--admin-radius);
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, color .2s;
}
.snav-dashboard.snav-item:hover {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}
.snav-dashboard.snav-item.active {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
  border-left: 3px solid var(--admin-primary);
  font-weight: 600;
}
.snav button.snav-item:hover { background: var(--admin-primary-light); color: var(--admin-primary); }
.snav button.snav-item.active { background: var(--admin-primary-light); color: var(--admin-primary); font-weight: 600; }
.snav-item.indent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--admin-muted);
  border-radius: var(--admin-radius);
  margin: 1px 0;
}
.snav-item.indent:hover { color: var(--admin-primary); background: var(--admin-primary-light); }
.snav-item.indent.active { color: var(--admin-primary); font-weight: 600; background: var(--admin-primary-light); }
.snav-item .node-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--admin-border);
  flex: 0 0 4px;
}
.snav-item.active .node-dot,
.snav-item.indent:hover .node-dot { background: var(--admin-primary); }
.snav-item .label { flex: 1; min-width: 0; }
.snav .badge {
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* 浮顯子選單：互動行為（hover/focus-within 顯示）保留，視覺對齊 admin。
   position:fixed → 逃離 .snav-body 捲動裁切；top/left 由 SideNav 的 positionFlyout()
   依 group-head rect 即時設定（含底部空間不足時上翻）。 */
.snav-flyout {
  position: fixed;
  width: 246px;
  min-height: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 38px 8px 8px;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-surface);
  box-shadow: 0 8px 24px rgba(28, 25, 23, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 60;
}
.snav-flyout::before {
  content: attr(data-title);
  position: absolute;
  left: 14px;
  top: 10px;
  color: var(--admin-text);
  font-size: 13px;
  font-weight: 600;
}
/* 顯示由 SideNav 的 openGroup 狀態加上 .is-open 控制（取代 :hover/:focus-within），
   以便點選子項後立即關閉；hover/focus 仍會開啟（JS 於 onMouseEnter/onFocusCapture 設定）。 */
.snav-flyout.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}
.snav-flyout .snav-item { width: 100%; margin: 1px 0; }
.snav-flyout .snav-item.indent { padding-left: 12px; }
.snav-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--admin-border);
  color: var(--admin-muted);
  font-size: 11px;
  flex-shrink: 0;
}

/* ── Top bar ───────────────────────────────────────────────────── */
.tbar {
  height: 56px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tbar-search {
  flex: 1; max-width: 480px;
  position: relative;
}
.tbar-search .input { padding-left: 32px; height: 34px; background: var(--surface-2); border-color: transparent; }
.tbar-search .input:focus { background: var(--surface); border-color: var(--primary); }
.tbar-search svg { position: absolute; left: 10px; top: 9px; color: var(--fg-muted); }
.tbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tbar-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--fg-muted); cursor: pointer;
  position: relative;
  transition: background var(--dur-micro);
}
.tbar-icon-btn:hover { background: var(--surface-hover); color: var(--fg); }
.tbar-icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: var(--danger); border-radius: 999px; border: 2px solid var(--surface); }
.tbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--dur-micro);
}
.tbar-user:hover { background: var(--surface-hover); }
.tbar-user .av {
  width: 28px; height: 28px;
  background: var(--primary); color: white;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-semibold);
}
.tbar-user .nm { font-size: 1em; font-weight: var(--fw-medium); color: var(--fg); }
.tbar-user .nm small { display: block; font-size: 0.846em; color: var(--fg-muted); font-weight: 400; }

/* ── Top nav (alternate to sidebar) ────────────────────────────── */
.tnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tnav-row { display: flex; align-items: center; height: 56px; padding: 0 12px; gap: 8px; }
.tnav-brand { display: flex; align-items: center; gap: 10px; }
.tnav-brand img { width: 28px; height: 28px; }
.tnav-brand .name { font-size: 1.077em; font-weight: var(--fw-semibold); color: var(--fg-strong); }
.tnav-items { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tnav-items::-webkit-scrollbar { display: none; }
.tnav-item {
  padding: 0 8px; height: 32px;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--radius-sm);
  font-size: 1em; color: var(--fg); cursor: pointer;
  transition: background var(--dur-micro);
  position: relative;
  white-space: nowrap; flex-shrink: 0;
  min-width: max-content; word-break: keep-all;
}
.tnav-item > span { white-space: nowrap; word-break: keep-all; flex-shrink: 0; }
.tnav-item > svg { flex-shrink: 0; }
.tnav-brand { flex-shrink: 0; min-width: max-content; }
.tnav-brand .name { white-space: nowrap; }
.tnav-item:hover { background: var(--surface-hover); }
.tnav-item.active { color: var(--primary-press); background: var(--primary-soft); font-weight: var(--fw-medium); }

/* ── Page header ───────────────────────────────────────────────── */
.page-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
}
.page-h h1 { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-semibold); color: var(--fg-strong); }
.page-h .crumb { font-size: var(--fs-caption); color: var(--fg-muted); margin-bottom: 4px; }
.page-h .crumb a { color: var(--fg-muted); cursor: pointer; }
.page-h .crumb a:hover { color: var(--primary); }
.page-h .actions { display: flex; gap: 8px; }

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 14px;
  font-size: 13px; color: var(--fg-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-micro), border-color var(--dur-micro);
  font-weight: var(--fw-medium);
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--primary-press); border-bottom-color: var(--primary); }
.tab .count { margin-left: 6px; font-size: 11px; padding: 1px 6px; background: var(--surface-2); border-radius: 999px; color: var(--fg-muted); }

/* ── Status Tabs (shared <StatusTabBar> component) ─────────────── */
.status-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.status-tab {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font-weight: var(--fw-medium);
  font-family: inherit;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}
.status-tab:hover:not(:disabled) { color: var(--fg); }
.status-tab--active { color: var(--primary-press); border-bottom-color: var(--primary); }
.status-tab:disabled { cursor: not-allowed; opacity: 0.6; }
.status-tab .count {
  margin-left: 6px;
  font-size: 11px;
  padding: 1px 6px;
  background: var(--surface-2);
  border-radius: 999px;
  color: var(--fg-muted);
}
.status-tab--active .count { background: var(--primary-soft); color: var(--primary-press); }

/* ── Mobile Status Tabs (<MStatusTabBar> chip row) ─────────────── */
.m-status-tabs {
  display: flex; gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.m-status-tabs::-webkit-scrollbar { display: none; }
.m-status-tab {
  flex-shrink: 0;
  height: 26px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
}
.m-status-tab:disabled { cursor: not-allowed; opacity: 0.6; }
.m-status-tab-count { font-size: 11px; opacity: 0.75; margin-left: 2px; }

/* ── Filters bar ───────────────────────────────────────────────── */
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filters .input { width: auto; max-width: 240px; }

/* ── Form rows ─────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; font-weight: var(--fw-medium); color: var(--fg-muted); }

/* ── Feedback, confirmation, retry states ─────────────────────── */
.kx-toast-stack {
  position: fixed;
  bottom: var(--kx-toast-bottom, 16px); /* 動態抬高避開右下角 KeyboardHintFooter；無 footer 時退回 16px。變數由 KeyboardHintFooter 依實際高度發佈 */
  right: 16px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
}
.kx-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.kx-toast--success { border-left-color: var(--success); }
.kx-toast--error { border-left-color: var(--danger); }
.kx-toast--warning { border-left-color: var(--warning); }
.kx-toast__body { flex: 1; min-width: 0; }
.kx-toast__title {
  color: var(--fg-strong);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}
.kx-toast__message {
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
}
.kx-inline-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.kx-inline-state--error {
  border-color: var(--danger-100);
  background: var(--danger-soft);
}
.kx-inline-state--warning {
  border-color: var(--warning-100);
  background: var(--warning-50);
}
.kx-inline-state__title {
  color: var(--fg-strong);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.kx-inline-state__message {
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.45;
}
.kx-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}
.kx-confirm-card {
  width: min(460px, 100%);
  border: 1px solid var(--border);
  border-top: 4px solid var(--warning);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.kx-confirm-card--danger { border-top-color: var(--danger); }
.kx-confirm-card--success { border-top-color: var(--success); }
.kx-confirm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
}
.kx-confirm-title {
  color: var(--fg-strong);
  font-size: 16px;
  font-weight: var(--fw-semibold);
}
.kx-confirm-message {
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.55;
}
.kx-confirm-details {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.55;
}
.kx-confirm-reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 16px 12px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.kx-confirm-reason textarea.input {
  height: auto;
  min-height: 76px;
  padding: 8px 10px;
  line-height: 1.45;
  resize: vertical;
}
.kx-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 16px;
}
.kx-confirm-card--danger .kx-confirm-actions .btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
.kx-confirm-card--danger .kx-confirm-actions .btn--danger:hover {
  background: var(--danger-700);
  border-color: var(--danger-700);
}

/* ── System shortcuts / print helpers ─────────────────────────────── */
.kb-footer {
  position: fixed;
  right: 16px;
  bottom: 12px;
  left: auto;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(880px, calc(100vw - 32px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
.kb-footer--collapsed {
  padding: 6px;
}
.kb-footer__toggle {
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.kb-footer__toggle:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.kb-footer__keys {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.kb-footer__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-muted);
  font-size: 11px;
  white-space: nowrap;
}
.kb-footer kbd {
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-bottom-color: color-mix(in oklab, var(--border) 70%, black);
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--fg-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.recent-popover {
  position: fixed;
  right: 18px;
  bottom: 64px;
  z-index: 2600;
  width: min(320px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.recent-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
}
.recent-popover__empty {
  padding: 18px 12px;
  color: var(--fg-muted);
  font-size: 12px;
  text-align: center;
}
.recent-popover__item {
  display: grid;
  grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.recent-popover__item:hover {
  background: var(--surface-hover);
}
.recent-popover__item:last-child {
  border-bottom: 0;
}

/* ── Empty state ───────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fg-muted);
  font-size: 13px;
}

/* ── Mobile-specific ───────────────────────────────────────────── */
.m-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 5;
}
.m-tabitem {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-size: 10px; color: var(--fg-muted);
  cursor: pointer;
  position: relative;
}
.m-tabitem.active { color: var(--primary); }
.m-tabitem.active svg { color: var(--primary); }
.m-tabitem svg { color: var(--fg-muted); }
.m-fab {
  position: absolute;
  bottom: 80px; right: 16px;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 4;
  transition: transform var(--dur-micro), background var(--dur-micro);
}
.m-fab:hover { background: var(--primary-hover); }
.m-fab:active { transform: scale(0.95); }

.m-appbar {
  height: 56px; display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.m-appbar .title { font-size: 17px; font-weight: var(--fw-semibold); color: var(--fg-strong); flex: 1; }
.m-appbar .ico-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--fg-muted); cursor: pointer;
}
.m-appbar .ico-btn:hover { background: var(--surface-hover); color: var(--fg); }

.m-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}
.m-work-orders-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.m-work-orders-shell {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.m-work-orders-shell > div {
  min-width: 0;
}

.m-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  cursor: pointer;
  transition: background var(--dur-micro);
}
.m-list-item:active { background: var(--surface-press); }

@media (max-width: 767px) {
  .btn { min-height: 44px; height: auto; padding: 0 14px; }
  .btn--sm { min-height: 40px; }
  .btn--icon { min-width: 44px; }
  .input { min-height: 44px; height: auto; }
  .kx-toast-stack {
    top: auto;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
  }
  .kx-confirm-backdrop {
    align-items: flex-end;
    padding: 12px;
  }
  .kx-confirm-card {
    width: 100%;
    border-radius: var(--radius-md);
  }
  .kx-confirm-actions {
    flex-direction: column-reverse;
  }
  .kx-confirm-actions .btn {
    width: 100%;
  }
  .kb-footer,
  .recent-popover {
    display: none;
  }
  .m-appbar .ico-btn,
  .m-tabitem,
  .m-list-item {
    min-height: 44px;
  }
}

.payment-receipt-modal {
  z-index: 3000;
}

.payment-receipt-sheet {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}

.payment-receipt-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.payment-receipt-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.payment-receipt-body {
  overflow: auto;
  padding: 18px;
  background: var(--surface-2);
}

.payment-receipt-doc {
  background: #fff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.payment-receipt-doc--void {
  border-color: var(--danger-500);
}

.payment-receipt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #111827;
}

.payment-receipt-brand {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}

.payment-receipt-header h2 {
  margin: 4px 0 2px;
  font-size: 26px;
  letter-spacing: 0;
  color: #111827;
}

.payment-receipt-header p {
  margin: 0;
  color: #4b5563;
  font-size: 13px;
}

.payment-receipt-number-box {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 180px;
  text-align: right;
}

.payment-receipt-number-box span {
  color: #6b7280;
  font-size: 12px;
}

.payment-receipt-number-box strong {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #111827;
}

.payment-receipt-void-alert {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--danger-500);
  border-radius: 6px;
  background: var(--danger-soft);
  color: var(--danger-700);
  font-size: 13px;
  font-weight: 700;
}

.payment-receipt-summary,
.payment-receipt-fields {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

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

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

.payment-receipt-summary > div,
.payment-receipt-fields > div {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  min-width: 0;
}

.payment-receipt-summary span,
.payment-receipt-fields span {
  color: #6b7280;
  font-size: 12px;
}

.payment-receipt-summary strong,
.payment-receipt-fields strong {
  color: #111827;
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.payment-receipt-summary strong {
  font-size: 16px;
}

.payment-receipt-section {
  margin-top: 18px;
}

.payment-receipt-section h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #111827;
}

.payment-receipt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.payment-receipt-table th,
.payment-receipt-table td {
  padding: 9px 10px;
  border: 1px solid #d1d5db;
  text-align: left;
  vertical-align: top;
}

.payment-receipt-table th {
  background: #f3f4f6;
  color: #374151;
  font-weight: 800;
}

.payment-receipt-table .num {
  text-align: right;
}

.payment-receipt-note {
  min-height: 38px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #374151;
  overflow-wrap: anywhere;
}

.payment-receipt-footer {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #d1d5db;
  color: #4b5563;
  font-size: 12px;
}

@media (max-width: 720px) {
  .payment-receipt-sheet {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
  .payment-receipt-toolbar {
    flex-direction: column;
  }
  .payment-receipt-toolbar-actions,
  .payment-receipt-toolbar-actions .btn {
    width: 100%;
  }
  .payment-receipt-header {
    flex-direction: column;
  }
  .payment-receipt-number-box {
    justify-items: start;
    text-align: left;
  }
  .payment-receipt-summary,
  .payment-receipt-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Misc utilities ────────────────────────────────────────────── */
.divider { height: 1px; background: var(--divider); margin: 12px 0; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--fg-muted); }
.strong { color: var(--fg-strong); font-weight: var(--fw-medium); }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-num); }
.mono { font-family: var(--font-mono); font-size: 12px; }
.neg { color: var(--danger); }
.pos { color: var(--success); }

.scroll-y { overflow-y: auto; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* sparkline svg */
.spark path { stroke: var(--primary); fill: none; stroke-width: 1.5; }
.spark .area { fill: var(--primary-soft); stroke: none; }

/* progress bar */
.bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 400ms var(--ease-standard); }
.bar.warn > span { background: var(--warning-500); }
.bar.danger > span { background: var(--danger-500); }

@media (max-width: 1180px) {
  .tnav-row {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 12px;
  }
  .tnav-items {
    order: 5;
    flex-basis: 100%;
    padding-top: 4px;
  }
  .erp-page-scroll {
    padding: 16px !important;
  }
  .page-h {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-h .actions,
  .filters,
  .wo-toolbar,
  .wo-batch-bar {
    width: 100%;
  }
  .kb-footer {
    display: none;
  }
}

@media print {
  @page { margin: 12mm; }
  body {
    background: white !important;
    color: #111827 !important;
  }
  .kb-footer,
  .recent-popover,
  .page-h .actions,
  .filters,
  .btn,
  .m-tabbar,
  .m-appbar {
    display: none !important;
  }
  .print-target {
    background: white !important;
    color: #111827 !important;
    box-shadow: none !important;
  }
  .print-target .card,
  .print-target .kpi {
    box-shadow: none !important;
    border-color: #D1D5DB !important;
  }
  .print-target table {
    page-break-inside: auto;
  }
  .print-target tr {
    page-break-inside: avoid;
  }
  body.kx-payment-receipt-open #root,
  body.kx-payment-receipt-open .kb-footer,
  body.kx-payment-receipt-open .kx-toast-stack {
    display: none !important;
  }
  body.kx-payment-receipt-open .payment-receipt-modal {
    position: static !important;
    inset: auto !important;
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.kx-payment-receipt-open .payment-receipt-sheet {
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body.kx-payment-receipt-open .payment-receipt-no-print {
    display: none !important;
  }
  body.kx-payment-receipt-open .payment-receipt-body {
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.kx-payment-receipt-open .payment-receipt-doc {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* === 工單管理：檢視切換列 + 工務看板（Phase 2） === */
.view-mode-bar { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.view-mode-bar button {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--fg-muted);
  border-radius: var(--radius-md); font-weight: 600; font-size: 13px;
}
.view-mode-bar button.active { background: var(--surface); color: var(--primary-press); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.view-mode-bar .vm-hint { margin-left: 8px; font-size: 12px; color: var(--fg-subtle); }

.wo-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}
.wo-wide-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  scrollbar-gutter: stable;
  background: var(--surface);
}
.wo-wide-table {
  width: var(--wo-table-width, 1180px);
  min-width: 100%;
  border-collapse: collapse;
}
.wo-wide-table th,
.wo-wide-table td {
  vertical-align: top;
}
.wo-wide-table td {
  min-width: 96px;
  white-space: normal;
}
.wo-wide-table .input,
.wo-wide-table textarea {
  display: block;
  width: 100%;
  min-width: 0;
}
.wo-wide-table .btn--icon {
  flex-shrink: 0;
}

[data-work-order-delivery-billing-modal] .wo-wide-table-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  scrollbar-gutter: auto;
}
[data-work-order-delivery-billing-modal] .wo-wide-table {
  display: block;
  width: 100%;
  min-width: 0;
  border-collapse: separate;
}
[data-work-order-delivery-billing-modal] .wo-wide-table thead {
  display: none;
}
[data-work-order-delivery-billing-modal] .wo-wide-table tbody {
  display: grid;
  gap: 12px;
}
[data-work-order-delivery-billing-modal] .wo-wide-table tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
[data-work-order-delivery-billing-modal] .wo-wide-table td {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0 !important;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
[data-work-order-delivery-billing-modal] .wo-wide-table td::before {
  display: block;
  margin-bottom: 1px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(1)::before { content: "送貨單"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(2)::before { content: "送貨狀態"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(3)::before { content: "不請款"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(4)::before { content: "數量"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(5)::before { content: "銷貨單"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(6)::before { content: "請款單"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(7)::before { content: "發票"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(8)::before { content: "應收金額"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(9)::before { content: "應收狀態"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(10)::before { content: "信用 / 鎖定"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(11)::before { content: "VB6 / 邊界"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(12)::before { content: "備註"; }
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(11),
[data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(12) {
  grid-column: span 2;
}
[data-work-order-delivery-billing-modal] .wo-wide-table td:last-child {
  align-items: flex-end;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  padding: 0;
}
[data-work-order-delivery-billing-modal] .wo-wide-table td:last-child::before {
  display: none;
}
[data-work-order-delivery-billing-modal] .wo-wide-table .input,
[data-work-order-delivery-billing-modal] .wo-wide-table textarea {
  width: 100%;
  min-width: 0;
}
[data-work-order-delivery-billing-modal] .wo-wide-table label {
  min-height: 34px;
}

.wo-work-order-list-card {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
.wo-work-order-list-card .tbl {
  min-width: 1180px;
}
.wo-work-order-list-card .tbl th,
.wo-work-order-list-card .tbl td {
  vertical-align: top;
}
.wo-work-order-list-card .chip {
  max-width: 100%;
}
.wo-opendesign-page {
  display: grid;
  gap: 12px;
}
.wo-op-demo-skin {
  --wo-od-bg: #eef1f5;
  --wo-od-panel: #ffffff;
  --wo-od-panel-2: #f7f9fc;
  --wo-od-line: #d6dce5;
  --wo-od-line-2: #c4ccd8;
  --wo-od-text: #202631;
  --wo-od-muted: #667285;
  --wo-od-soft: #eef3f8;
  --wo-od-blue: #2563eb;
  --wo-od-blue-soft: #e8f0ff;
  --wo-od-green: #0f8f60;
  --wo-od-green-soft: #e7f7ef;
  --wo-od-amber: #b97800;
  --wo-od-amber-soft: #fff4d8;
  --wo-od-red: #c33838;
  --wo-od-red-soft: #ffe8e8;
  --wo-od-violet: #7357d8;
  --wo-od-violet-soft: #f0edff;
  --wo-od-cyan: #08799d;
  --wo-od-cyan-soft: #e4f6fb;
  --primary: var(--wo-od-blue);
  --primary-hover: #1d4ed8;
  --primary-press: #1e40af;
  --primary-soft: var(--wo-od-blue-soft);
  min-height: calc(100vh - 96px);
  margin: -12px;
  padding: 12px;
  background: var(--wo-od-bg);
  color: var(--wo-od-text);
  align-content: start;
}
.wo-op-demo-skin .wo-op-shell-head {
  min-height: 54px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -12px -12px 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--wo-od-line);
  background: var(--wo-od-panel);
}
.wo-op-demo-skin .wo-op-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 190px;
}
.wo-op-demo-skin .wo-op-title h1 {
  color: var(--wo-od-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.wo-op-demo-skin .wo-op-title > span {
  margin-top: 0;
  color: var(--wo-od-muted);
  font-size: 12px;
  line-height: 1.2;
}
.wo-op-demo-skin .wo-op-view-tabs {
  justify-self: start;
  gap: 6px;
  min-height: 34px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
.wo-op-demo-skin .wo-op-view-tabs button {
  min-width: 86px;
  height: 30px;
  border-color: transparent;
  border-radius: 6px;
  color: var(--wo-od-muted);
  font-size: 13px;
  font-weight: 700;
}
.wo-op-demo-skin .wo-op-view-tabs button.active {
  border-color: #a9c1ff;
  background: var(--wo-od-blue-soft);
  color: var(--wo-od-blue);
  box-shadow: none;
}
.wo-op-demo-skin .wo-op-actions {
  gap: 6px;
  white-space: nowrap;
}
.wo-op-demo-skin .wo-op-list-shell,
.wo-op-demo-skin .wo-op-kanban-shell {
  border-color: var(--wo-od-line);
  background: var(--wo-od-panel);
  box-shadow: 0 10px 28px rgba(32, 38, 49, .08);
}
.wo-op-demo-skin .wo-op-list-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  grid-template-columns: minmax(260px, 1.2fr) minmax(320px, 2fr) auto;
  gap: 8px;
  padding: 8px 10px;
  border-bottom-color: var(--wo-od-line);
  background: var(--wo-od-panel);
}
.wo-op-demo-skin .wo-op-searchbox {
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  height: 34px;
  padding: 0;
  border-color: var(--wo-od-line);
  background: var(--wo-od-panel-2);
  color: var(--wo-od-muted);
  overflow: hidden;
}
.wo-op-demo-skin .wo-op-searchbox input {
  min-height: 32px;
  padding: 0 4px;
  font-size: 13px;
}
.wo-op-demo-skin .wo-op-status-chip {
  height: 28px;
  border-color: var(--wo-od-line);
  color: var(--wo-od-muted);
}
.wo-op-demo-skin .wo-op-status-chip.active {
  border-color: #a9c1ff;
  background: var(--wo-od-blue-soft);
  color: var(--wo-od-blue);
}
.wo-op-demo-skin .wo-op-list-meta {
  min-height: 0;
  padding: 6px 10px;
  border-bottom: 0;
  color: var(--wo-od-muted);
}
.wo-op-demo-skin .wo-op-list-context {
  padding: 9px 12px;
  border-color: #e3e8ef;
  background: #fbfcfe;
}
.wo-op-demo-skin .wo-op-card-list {
  gap: 9px;
  padding: 10px;
  background: #f4f7fb;
}
.wo-op-demo-skin .wo-op-card {
  grid-template-columns: 34px minmax(260px, 1.1fr) minmax(360px, 1.55fr) minmax(230px, .9fr) 34px;
  gap: 8px;
  min-height: 98px;
  border-color: #dbe3ef;
  border-left-width: 5px;
  border-left-color: #9ab4d9;
  background: var(--wo-od-panel);
  padding: 8px;
  box-shadow: 0 4px 14px rgba(32, 38, 49, .04);
}
.wo-op-demo-skin .wo-op-card:hover {
  border-color: #acc4e9;
  border-left-color: var(--wo-od-blue);
  background: #fbfdff;
}
.wo-op-demo-skin .wo-op-card.is-selected {
  border-color: #91afff;
  background: #f5f8ff;
}
.wo-op-demo-skin .wo-op-card--primary,
.wo-op-demo-skin .wo-op-card--info {
  border-left-color: var(--wo-od-blue);
}
.wo-op-demo-skin .wo-op-card--success {
  border-left-color: var(--wo-od-green);
}
.wo-op-demo-skin .wo-op-card--warning {
  border-left-color: var(--wo-od-amber);
}
.wo-op-demo-skin .wo-op-card--danger {
  border-left-color: var(--wo-od-red);
}
.wo-op-demo-skin .wo-op-card-group {
  border-color: #e5ebf3;
  border-radius: 7px;
  padding: 8px;
}
.wo-op-demo-skin .wo-op-card-identity {
  background: #fbfcff;
}
.wo-op-demo-skin .wo-op-card-production {
  background: #f7fbff;
}
.wo-op-demo-skin .wo-op-card-finance {
  background: #fffdf7;
}
.wo-op-demo-skin .wo-op-card-label {
  margin-bottom: 5px;
  color: #526176;
  font-size: 11px;
  font-weight: 800;
}
.wo-op-demo-skin .wo-op-card-note {
  margin-top: 7px;
  padding: 6px 8px;
  border-style: dashed;
  border-color: #d8e0eb;
  background: #f9fbfe;
  color: var(--wo-od-muted);
}
.wo-op-demo-skin .wo-op-mini-grid {
  gap: 6px;
}
.wo-op-demo-skin .wo-op-mini-band {
  min-height: 74px;
  border-color: #dfe6ef;
  border-radius: 6px;
  background: var(--wo-od-panel);
  padding: 6px 7px;
}
.wo-op-demo-skin .wo-op-mini-band span,
.wo-op-demo-skin .wo-op-mini-band small,
.wo-op-demo-skin .wo-op-row-sub {
  color: var(--wo-od-muted);
}
.wo-op-demo-skin .wo-op-progress-track {
  background: #e5ebf3;
}
.wo-op-demo-skin .wo-op-progress-track > i {
  background: linear-gradient(90deg, var(--wo-od-blue), var(--wo-od-green));
}
.wo-op-shell-head {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
  padding-bottom: 2px;
}
.wo-op-title {
  min-width: 0;
}
.wo-op-title h1 {
  margin: 0;
  color: var(--fg-strong);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.wo-op-title > span {
  display: block;
  margin-top: 3px;
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}
.wo-op-title .crumb {
  margin-bottom: 4px;
  color: var(--fg-muted);
  font-size: var(--fs-caption);
}
.wo-op-view-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-op-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 88px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wo-op-view-tabs button.active {
  border-color: var(--primary);
  background: var(--surface);
  color: var(--primary-press);
  box-shadow: var(--shadow-sm);
}
.wo-op-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.wo-op-tool-btn {
  flex: 0 0 auto;
  height: 32px;
  color: var(--fg-muted);
}
.wo-op-list-shell,
.wo-op-kanban-shell {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.wo-op-list-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(360px, 2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.wo-op-searchbox {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg-muted);
}
.wo-op-searchbox:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.wo-op-searchbox input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}
.wo-op-search-clear {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.wo-op-search-clear:hover {
  background: var(--surface-hover);
  color: var(--fg-strong);
}
.wo-op-status-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.wo-op-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.wo-op-status-chip b {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg);
  font-family: var(--font-num);
  font-size: 11px;
}
.wo-op-status-chip.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-press);
}
.wo-op-status-chip.active b {
  background: var(--surface);
  color: var(--primary-press);
}
.wo-op-toolbar-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.wo-op-list-meta,
.wo-op-kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font-size: 12px;
}
.wo-op-list-meta {
  justify-content: flex-end;
}
.wo-op-list-meta-sep {
  width: 1px;
  height: 14px;
  background: var(--border);
}
.wo-op-section-title {
  color: var(--fg-strong);
  font-size: 13px;
  font-weight: 700;
}
.wo-op-inline-state,
.wo-op-loading {
  padding: 18px;
}
.wo-op-loading {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
}
.wo-op-list-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}
.wo-op-list-context > div:first-child {
  min-width: 0;
}
.wo-op-list-context span {
  display: block;
  margin-top: 3px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wo-op-list-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.wo-op-list-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-op-list-sort button {
  height: 28px;
  min-width: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  padding: 0 9px;
  font: var(--fw-medium) 12px/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.wo-op-list-sort button:hover {
  background: var(--surface-hover);
  color: var(--fg);
}
.wo-op-list-sort button.active {
  background: var(--primary-soft);
  color: var(--primary-press);
}
.wo-op-list-select-all {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.wo-op-list-select-all input {
  width: 15px;
  height: 15px;
}
.wo-op-card-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.wo-op-card {
  display: grid;
  grid-template-columns: 34px minmax(260px, 1.05fr) minmax(360px, 1.45fr) minmax(260px, 0.95fr) 34px;
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  cursor: pointer;
}
.wo-op-card:hover {
  border-color: var(--primary);
  border-left-color: var(--primary);
  background: var(--surface-hover);
}
.wo-op-card.is-selected {
  background: var(--primary-soft);
}
.wo-op-card.is-active {
  box-shadow: inset 0 0 0 1px var(--primary);
}
.wo-op-card--primary,
.wo-op-card--info {
  border-left-color: var(--info-700);
}
.wo-op-card--success {
  border-left-color: var(--success-700);
}
.wo-op-card--warning {
  border-left-color: var(--warning-700);
}
.wo-op-card--danger {
  border-left-color: var(--danger);
}
.wo-op-card-select,
.wo-op-card-more {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
}
.wo-op-card-select input {
  width: 16px;
  height: 16px;
}
.wo-op-card-group {
  min-width: 0;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}
.wo-op-card-label {
  margin-bottom: 7px;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
}
.wo-op-card-titleline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.wo-op-card-note {
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid var(--divider);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.wo-op-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
}
.wo-op-mini-grid--finance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wo-op-mini-band {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 82px;
  padding: 9px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-op-mini-band span {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.wo-op-mini-band strong {
  min-width: 0;
  color: var(--fg-strong);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.wo-op-mini-band small {
  min-width: 0;
  color: var(--fg-muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.wo-op-progress-track {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--divider);
}
.wo-op-progress-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}
.wo-op-grid-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
.wo-op-grid {
  min-width: 1084px;
  table-layout: fixed;
}
.wo-op-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
}
.wo-op-grid thead th,
.wo-op-grid tbody td {
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wo-op-grid tbody tr {
  cursor: pointer;
}
.wo-op-grid tbody tr.is-selected td {
  background: var(--primary-soft);
}
.wo-op-grid tbody tr.is-active td {
  background: var(--surface-hover);
}
.wo-op-grid tbody tr.is-selected.is-active td {
  background: var(--primary-soft);
}
.wo-op-grid .wo-op-col-select {
  width: 34px;
  text-align: center;
  white-space: nowrap;
}
.wo-op-col-process {
  width: 138px;
}
.wo-op-col-material {
  width: 106px;
}
.wo-op-col-amount {
  width: 86px;
}
.wo-op-col-billing {
  width: 112px;
}
.wo-op-grid .wo-op-col-more {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}
.wo-op-order-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-press);
  font: inherit;
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.wo-op-order-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
.wo-op-cell-main,
.wo-op-row-sub {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.wo-op-cell-main {
  display: block;
  line-height: 1.35;
}
.wo-op-row-sub {
  margin-top: 4px;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
}
.wo-op-row-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.wo-op-row-tags .chip,
.wo-op-grid .chip {
  max-width: 100%;
}
.wo-detail-fullscreen {
  display: flex;
  flex-direction: column;
}
.wo-detail-form {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.wo-detail-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 38px minmax(220px, 1fr) minmax(360px, auto);
  align-items: center;
  gap: 8px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--divider);
  background: var(--surface);
}
.wo-detail-icon {
  grid-column: 1;
  grid-row: 1;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
}
.wo-detail-titleblock {
  grid-column: 2;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.wo-detail-titleblock .muted {
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-titleline {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wo-detail-titleblock #print-work-order-detail-title {
  margin: 0;
  color: var(--fg-strong);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}
.wo-detail-common-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(760px, 58vw);
  min-width: 0;
}
.wo-detail-common-actions .btn {
  min-width: 0;
}
.wo-detail-common-actions .btn--sm {
  min-height: 26px;
  padding-inline: 8px;
}
.wo-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px 14px 14px;
  background: var(--surface-2);
}
.wo-detail-status-note {
  margin-bottom: 12px;
}
.wo-detail-more-wrap {
  position: relative;
  display: inline-flex;
}
.wo-detail-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 2660;
  display: grid;
  gap: 3px;
  width: 224px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.wo-detail-more-menu button {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--fg);
  padding: 7px 8px;
  text-align: left;
  font: var(--fw-medium) 1em/1.2 var(--font-sans);
  cursor: pointer;
}
.wo-detail-more-menu button:hover {
  background: var(--surface-hover);
}
.wo-detail-more-menu button:disabled {
  color: var(--fg-subtle);
  cursor: not-allowed;
  background: transparent;
}
.wo-detail-more-menu__divider {
  height: 1px;
  margin: 3px 2px;
  background: var(--divider);
}
.wo-detail-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.62fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}
.wo-detail-hero-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}
.wo-detail-hero-kicker {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.wo-detail-hero-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
  color: var(--fg-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.wo-detail-hero-title > .mono {
  min-width: 0;
  overflow-wrap: anywhere;
}
.wo-detail-hero-subline {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-hero-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wo-detail-hero-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-detail-hero-metric span,
.wo-detail-muted-panel span {
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.wo-detail-hero-metric strong,
.wo-detail-muted-panel strong {
  min-width: 0;
  color: var(--fg-strong);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-hero-metric small,
.wo-detail-muted-panel small {
  min-width: 0;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-opendesign {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wo-detail-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, 0.78fr);
  gap: 10px;
}
.wo-detail-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}
.wo-detail-panel-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--divider);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
}
.wo-detail-panel-head small {
  display: block;
  margin-top: 1px;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-regular);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wo-detail-section {
  border-left: 4px solid var(--border);
}
.wo-detail-section--identity {
  border-left-color: var(--primary);
}
.wo-detail-section--customer {
  border-left-color: var(--info-700);
}
.wo-detail-section--production {
  border-left-color: var(--success-700);
}
.wo-detail-section--risk {
  border-left-color: var(--warning-700);
}
.wo-detail-section--audit {
  border-left-color: var(--fg-subtle);
}
.wo-detail-audit-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(220px, 0.7fr);
  gap: 10px;
  padding: 12px;
}
.wo-detail-muted-panel {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 70px;
  padding: 8px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}
.wo-detail-info-grid > div {
  min-width: 0;
}
.wo-detail-info-grid .strong {
  overflow-wrap: anywhere;
}
.wo-detail-info-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wo-detail-edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.wo-detail-edit-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wo-detail-section--identity .wo-detail-edit-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wo-detail-section--customer .wo-detail-edit-grid--two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wo-detail-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wo-detail-field > span {
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: var(--fw-medium);
  line-height: 1.2;
}
.wo-detail-field input,
.wo-detail-field select,
.wo-detail-field textarea {
  width: 100%;
  min-width: 0;
}
.wo-detail-field textarea {
  resize: vertical;
  min-height: 86px;
}
.wo-detail-field.compact-note-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.wo-detail-field.compact-note-field > span {
  align-self: center;
}
.compact-note-field textarea.input {
  min-height: 34px;
  height: 34px;
  padding-top: 7px;
  line-height: 1.35;
  overflow: hidden;
}
.compact-note-field:focus-within textarea.input {
  min-height: 74px;
  height: 74px;
  overflow: auto;
}
.compact-note-field .btn {
  height: 28px;
  padding-inline: 8px;
}
.wo-detail-field--span-2 {
  grid-column: span 2;
}
.wo-detail-field--full {
  grid-column: 1 / -1;
}
.wo-detail-field--checkbox {
  min-height: 32px;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.wo-detail-field--checkbox input {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.wo-detail-readonly {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-strong);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.wo-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 12px;
  align-items: start;
}
.wo-workbench-main,
.wo-workbench-side {
  min-width: 0;
}
.wo-workbench-head > div {
  min-width: 0;
}
.wo-workbench-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 10px 0;
  overflow-x: auto;
  scrollbar-gutter: stable;
}
.wo-workbench-tabs button {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg-muted);
  padding: 0 10px;
  font: var(--fw-medium) 0.923em/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.wo-workbench-tabs button:hover {
  background: var(--surface-hover);
}
.wo-workbench-tabs button.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-press);
}
.wo-workbench-panel {
  padding: 12px;
}
.wo-workbench-placeholder {
  min-height: 176px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  text-align: center;
}
.wo-process-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.wo-process-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wo-process-add-wrap {
  display: inline-flex;
}
.wo-process-menu {
  position: fixed;
  z-index: 2680;
  width: 284px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.wo-process-menu-item {
  position: relative;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg);
  padding: 0 9px;
  overflow: visible;
  text-align: center;
  font: var(--fw-medium) 0.923em/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
}
.wo-process-menu-item:hover,
.wo-process-menu-item:focus-visible {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-press);
  outline: none;
}
.wo-process-menu-item[data-tooltip]:hover::after,
.wo-process-menu-item[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  z-index: 2690;
  width: max-content;
  max-width: 220px;
  transform: translateX(-50%);
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--fg-strong);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
  font: 12px/1.35 var(--font-sans);
  white-space: normal;
  text-align: left;
}
.wo-process-list {
  display: grid;
  gap: 8px;
}
.wo-process-row {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px minmax(86px, 0.16fr) minmax(220px, 1fr) minmax(92px, 0.18fr) minmax(72px, 0.13fr) 28px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
}
.wo-process-row:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}
.wo-process-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.wo-process-handle {
  color: var(--fg-subtle);
  font-size: 14px;
  line-height: 1;
  text-align: center;
}
.wo-process-pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-radius: var(--radius-full);
  padding: 3px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-muted);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.wo-process-pill--primary {
  background: var(--primary-soft);
  color: var(--primary-press);
}
.wo-process-pill--info {
  background: var(--info-50);
  color: var(--info-700);
}
.wo-process-pill--success {
  background: var(--success-50);
  color: var(--success-700);
}
.wo-process-pill--warning {
  background: var(--warning-50);
  color: var(--warning-700);
}
.wo-process-pill--danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.wo-process-pill--neutral {
  background: var(--surface-2);
  color: var(--fg-muted);
}
.wo-process-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.wo-process-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-strong);
  font-size: 13px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.wo-process-title span,
.wo-process-date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-muted);
  font-size: 12px;
  white-space: nowrap;
}
.wo-process-edit {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
}
.wo-side-metrics {
  display: grid;
  gap: 8px;
  padding: 12px;
}
.wo-side-metrics > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 10px;
}
.wo-side-metrics span,
.wo-side-metrics small {
  display: block;
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.35;
}
.wo-side-metrics strong {
  display: block;
  margin: 4px 0 3px;
  color: var(--fg-strong);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.wo-process-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2750;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(8, 15, 26, 0.36);
}
.wo-process-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.wo-process-modal-head,
.wo-process-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.wo-process-modal-head {
  border-bottom: 1px solid var(--divider);
}
.wo-process-modal-body {
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
}
.wo-process-modal-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.wo-process-modal-selected .muted {
  min-width: 0;
  flex: 1 1 220px;
}
.wo-process-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wo-process-modal-grid label {
  min-width: 0;
}
.wo-process-modal-grid label > .muted {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: var(--fw-medium);
}
.wo-process-modal-span {
  grid-column: span 3;
}
.wo-process-modal-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--divider);
  background: var(--surface-2);
}

[data-print-work-order-detail-modal].density-proposal {
  --slate-0: #ffffff;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-150: #e6ebf2;
  --slate-200: #dde3ec;
  --slate-300: #c4cdda;
  --slate-400: #94a0b4;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --surface: var(--slate-0);
  --surface-2: var(--slate-50);
  --surface-hover: var(--slate-100);
  --border: var(--slate-200);
  --divider: var(--slate-150);
  --fg-strong: var(--slate-900);
  --fg: var(--slate-800);
  --fg-muted: var(--slate-500);
  --fg-subtle: var(--slate-400);
  --primary: #30a0c0;
  --primary-hover: #228aaa;
  --primary-press: #1c6f8b;
  --primary-soft: #ecfafd;
  --focus-ring: rgba(48, 160, 192, .24);
  --success-50: #f0fdf4;
  --success-700: #15803d;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-700: #b45309;
  --danger-50: #fef2f2;
  --danger-700: #b91c1c;
  --info-50: #f0f9ff;
  --info-700: #0369a1;
}
[data-print-work-order-detail-modal].density-proposal .print-target {
  border-color: var(--border);
  background: var(--surface);
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-header {
  background: var(--surface);
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-body {
  background: var(--surface-2);
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-hero,
[data-print-work-order-detail-modal].density-proposal .wo-detail-panel {
  border-color: var(--border);
  box-shadow: 0 5px 16px rgba(32, 38, 49, .04);
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-hero {
  border-left-color: var(--primary);
  background: #fbfcff;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-panel-head {
  border-bottom-color: var(--border);
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section {
  border-left-width: 5px;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section--identity .wo-detail-panel-head {
  background: #f2f7ff;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section--customer .wo-detail-panel-head {
  background: #eef9fb;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section--production .wo-detail-panel-head {
  background: #eefaf4;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section--risk .wo-detail-panel-head {
  background: #fff8e6;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-section--audit .wo-detail-panel-head {
  background: #f6f8fb;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-edit-grid,
[data-print-work-order-detail-modal].density-proposal .wo-workbench-panel,
[data-print-work-order-detail-modal].density-proposal .wo-side-metrics,
[data-print-work-order-detail-modal].density-proposal .wo-detail-audit-strip {
  background: #fbfdff;
}
[data-print-work-order-detail-modal].density-proposal .wo-detail-hero-metric,
[data-print-work-order-detail-modal].density-proposal .wo-detail-muted-panel,
[data-print-work-order-detail-modal].density-proposal .wo-side-metrics > div,
[data-print-work-order-detail-modal].density-proposal .wo-detail-readonly,
[data-print-work-order-detail-modal].density-proposal .wo-workbench-tabs button {
  border-color: #dfe6ef;
  background: var(--surface);
}
[data-print-work-order-detail-modal].density-proposal .compact-note-field textarea.input {
  background: var(--surface);
}
[data-print-work-order-detail-modal].density-proposal .wo-workbench-tabs {
  background: #fbfdff;
}
[data-print-work-order-detail-modal].density-proposal .wo-process-row {
  border-color: #e3e8ef;
}
[data-print-work-order-detail-modal].density-proposal .wo-process-row:hover {
  border-color: var(--primary);
  background: #fbfdff;
}

@media (max-width: 1080px) {
  .wo-op-list-context {
    align-items: flex-start;
    flex-direction: column;
  }
  .wo-op-list-controls {
    width: 100%;
    justify-content: space-between;
  }
  .wo-op-card {
    grid-template-columns: 34px minmax(280px, 1fr) minmax(320px, 1fr) 34px;
  }
  .wo-op-demo-skin .wo-op-card {
    grid-template-columns: 34px minmax(280px, 1fr) minmax(320px, 1fr) 34px;
  }
  .wo-op-card-finance {
    grid-column: 2 / 4;
  }
  .wo-op-demo-skin .wo-op-card-finance {
    grid-column: 2 / 4;
  }
  .wo-op-card-more {
    grid-column: 4;
    grid-row: 1;
  }
  .wo-op-demo-skin .wo-op-card-more {
    grid-column: 4;
    grid-row: 1;
  }
  .wo-op-mini-grid--finance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .wo-detail-header {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .wo-detail-icon {
    grid-row: 1;
  }
  .wo-detail-titleblock {
    grid-column: 2;
  }
  .wo-detail-state {
    grid-column: 2;
  }
  .wo-detail-common-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }
  .wo-detail-hero {
    grid-template-columns: 1fr;
  }
  .wo-detail-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wo-detail-top-grid,
  .wo-workbench {
    grid-template-columns: 1fr;
  }
  .wo-detail-edit-grid,
  .wo-detail-edit-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wo-detail-section--identity .wo-detail-edit-grid,
  .wo-detail-section--customer .wo-detail-edit-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wo-workbench-side {
    order: 2;
  }
  .wo-side-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wo-detail-audit-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wo-op-list-toolbar {
    align-items: stretch;
  }
  .wo-op-list-context {
    padding: 12px;
  }
  .wo-op-list-controls,
  .wo-op-list-sort {
    width: 100%;
  }
  .wo-op-list-sort {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .wo-op-list-sort button {
    padding: 0 4px;
    font-size: 11px;
  }
  .wo-op-list-select-all {
    width: 100%;
  }
  .wo-op-card-list {
    padding: 10px;
  }
  .wo-op-card {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 8px;
  }
  .wo-op-demo-skin .wo-op-card {
    grid-template-columns: 28px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 8px;
  }
  .wo-op-card-select {
    grid-column: 1;
    grid-row: 1;
  }
  .wo-op-demo-skin .wo-op-card-select {
    grid-column: 1;
    grid-row: 1;
  }
  .wo-op-card-more {
    grid-column: 3;
    grid-row: 1;
  }
  .wo-op-demo-skin .wo-op-card-more {
    grid-column: 3;
    grid-row: 1;
  }
  .wo-op-card-group {
    grid-column: 2 / 3;
  }
  .wo-op-demo-skin .wo-op-card-group {
    grid-column: 2 / 3;
  }
  .wo-op-card-production,
  .wo-op-card-finance {
    grid-column: 1 / -1;
  }
  .wo-op-demo-skin .wo-op-card-production,
  .wo-op-demo-skin .wo-op-card-finance {
    grid-column: 1 / -1;
  }
  .wo-op-mini-grid,
  .wo-op-mini-grid--finance {
    grid-template-columns: 1fr;
  }
  [data-print-work-order-create-modal],
  [data-print-work-order-edit-modal] {
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    overflow: hidden;
  }
  [data-print-work-order-create-modal] .wo-form-modal,
  [data-print-work-order-edit-modal] .wo-form-modal {
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border: 0 !important;
    border-radius: 0 !important;
  }
  [data-print-work-order-create-modal] .wo-form-header,
  [data-print-work-order-edit-modal] .wo-form-header {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: start !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }
  [data-print-work-order-create-modal] .wo-form-header > div:first-child,
  [data-print-work-order-edit-modal] .wo-form-header > div:first-child {
    grid-column: 1;
  }
  [data-print-work-order-create-modal] .wo-form-header > div:nth-child(2),
  [data-print-work-order-edit-modal] .wo-form-header > div:nth-child(2) {
    grid-column: 2;
    min-width: 0;
  }
  [data-print-work-order-create-modal] .wo-form-header > .chip,
  [data-print-work-order-edit-modal] .wo-form-header > .chip {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }
  [data-print-work-order-create-modal] .wo-form-header > button.btn--icon,
  [data-print-work-order-edit-modal] .wo-form-header > button.btn--icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-print-work-order-create-modal] .wo-form-stage,
  [data-print-work-order-edit-modal] .wo-form-stage {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  [data-print-work-order-create-modal] .wo-form-content,
  [data-print-work-order-edit-modal] .wo-form-content {
    min-height: 0;
    padding: 14px 12px !important;
    overflow-y: auto !important;
  }
  [data-print-work-order-create-modal] .wo-form-customer-grid,
  [data-print-work-order-edit-modal] .wo-form-customer-grid,
  [data-print-work-order-create-modal] .wo-form-template-grid,
  [data-print-work-order-edit-modal] .wo-form-template-grid,
  [data-print-work-order-create-modal] .wo-form-grid,
  [data-print-work-order-edit-modal] .wo-form-grid {
    grid-template-columns: 1fr !important;
  }
  [data-print-work-order-create-modal] .wo-form-grid > *,
  [data-print-work-order-edit-modal] .wo-form-grid > * {
    grid-column: 1 / -1 !important;
    min-width: 0;
  }
  [data-print-work-order-create-modal] .wo-form-customer-list,
  [data-print-work-order-edit-modal] .wo-form-customer-list {
    max-height: 260px;
    overflow-y: auto !important;
  }
  [data-print-work-order-create-modal] .wo-form-customer-list > button:nth-of-type(n+5),
  [data-print-work-order-edit-modal] .wo-form-customer-list > button:nth-of-type(n+5) {
    display: none !important;
  }
  [data-print-work-order-create-modal] .wo-form-process-tab > div:nth-child(2),
  [data-print-work-order-edit-modal] .wo-form-process-tab > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
  [data-print-work-order-create-modal] .wo-form-footer,
  [data-print-work-order-edit-modal] .wo-form-footer {
    flex-direction: column;
    align-items: stretch !important;
    padding: 10px 12px !important;
  }
  [data-print-work-order-create-modal] .wo-form-footer > div,
  [data-print-work-order-edit-modal] .wo-form-footer > div {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  [data-print-work-order-create-modal] .wo-form-footer .btn,
  [data-print-work-order-edit-modal] .wo-form-footer .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
  [data-print-work-order-detail-modal] {
    align-items: stretch !important;
    padding: 0 !important;
  }
  [data-print-work-order-detail-modal] .print-target {
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-header {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-header > div:first-child {
    grid-column: 1;
  }
  [data-print-work-order-detail-modal] .wo-detail-header > div:nth-child(2) {
    grid-column: 2;
    min-width: 0;
  }
  [data-print-work-order-detail-modal] .wo-detail-header > button.btn--icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-print-work-order-detail-modal] .wo-detail-header > .chip,
  [data-print-work-order-detail-modal] .wo-detail-header > button:not(.btn--icon) {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }
  [data-print-work-order-detail-modal] .wo-detail-common-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    width: 100%;
    padding-bottom: 2px;
    margin-left: 0;
  }
  [data-print-work-order-detail-modal] .wo-detail-common-actions .btn {
    width: auto;
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 6px;
  }
  [data-print-work-order-detail-modal] .wo-detail-header {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-titleblock {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-state {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-common-actions {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-common-actions .btn {
    min-height: 34px;
    flex: 0 0 auto;
    justify-content: center;
  }
  [data-print-work-order-detail-modal] .wo-detail-more-wrap,
  [data-print-work-order-detail-modal] .wo-detail-more-wrap > .btn {
    width: auto;
    flex: 0 0 auto;
  }
  [data-print-work-order-detail-modal] .wo-detail-more-menu {
    right: 0;
    width: min(220px, calc(100vw - 24px));
  }
  [data-print-work-order-detail-modal] .wo-detail-body {
    padding: 10px !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-hero {
    padding: 10px;
  }
  [data-print-work-order-detail-modal] .wo-detail-hero-title {
    font-size: 18px;
  }
  [data-print-work-order-detail-modal] .wo-detail-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-print-work-order-detail-modal] .wo-detail-modeswitch {
    align-items: stretch;
    width: 100%;
    border-radius: 8px;
  }
  [data-print-work-order-detail-modal] .wo-detail-modeswitch button {
    flex: 1 1 92px;
    justify-content: center;
  }
  [data-print-work-order-detail-modal] .wo-detail-modeswitch .vm-hint {
    width: 100%;
    max-width: none;
    margin: 2px 6px 3px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  [data-print-work-order-detail-modal] .wo-detail-info-grid {
    grid-template-columns: 1fr !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-edit-grid,
  [data-print-work-order-detail-modal] .wo-detail-edit-grid--two {
    grid-template-columns: 1fr !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-field,
  [data-print-work-order-detail-modal] .wo-detail-field--span-2,
  [data-print-work-order-detail-modal] .wo-detail-field--full {
    grid-column: 1 / -1 !important;
  }
  [data-print-work-order-detail-modal] .wo-detail-field.compact-note-field {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  [data-print-work-order-detail-modal] .compact-note-field .btn {
    justify-self: start;
  }
  [data-print-work-order-detail-modal] .wo-workbench-tabs {
    padding-inline: 0;
  }
  [data-print-work-order-detail-modal] .wo-workbench-panel {
    padding-inline: 0;
  }
  [data-print-work-order-detail-modal] .wo-process-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  [data-print-work-order-detail-modal] .wo-process-actions {
    justify-content: stretch;
  }
  [data-print-work-order-detail-modal] .wo-process-actions .btn,
  [data-print-work-order-detail-modal] .wo-process-add-wrap {
    flex: 1 1 140px;
  }
  [data-print-work-order-detail-modal] .wo-process-add-wrap .btn {
    width: 100%;
  }
  [data-print-work-order-detail-modal] .wo-process-row {
    grid-template-columns: 22px minmax(0, 1fr) 28px;
    align-items: start;
  }
  [data-print-work-order-detail-modal] .wo-process-row .wo-process-pill:first-of-type,
  [data-print-work-order-detail-modal] .wo-process-title,
  [data-print-work-order-detail-modal] .wo-process-date,
  [data-print-work-order-detail-modal] .wo-process-row .wo-process-pill:last-of-type {
    grid-column: 2;
  }
  [data-print-work-order-detail-modal] .wo-process-title strong,
  [data-print-work-order-detail-modal] .wo-process-title span,
  [data-print-work-order-detail-modal] .wo-process-date {
    white-space: normal;
  }
  [data-print-work-order-detail-modal] .wo-process-edit {
    grid-column: 3;
    grid-row: 1;
  }
  [data-print-work-order-detail-modal] .wo-side-metrics {
    grid-template-columns: 1fr;
  }
  [data-print-work-order-detail-modal] .wo-detail-audit-strip {
    grid-template-columns: 1fr;
  }
  .wo-process-menu {
    left: 12px !important;
    width: calc(100vw - 24px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .wo-process-menu-item[data-tooltip]:hover::after,
  .wo-process-menu-item[data-tooltip]:focus-visible::after {
    left: 0;
    max-width: calc(100vw - 48px);
    transform: none;
  }
  .wo-process-modal-backdrop {
    align-items: stretch;
    padding: 0;
  }
  .wo-process-modal {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .wo-process-modal-grid {
    grid-template-columns: 1fr;
  }
  .wo-process-modal-span {
    grid-column: auto;
  }
  [data-print-work-order-detail-modal] .wo-detail-action-row .btn {
    flex: 1 1 150px;
    justify-content: center;
    min-width: 0;
  }
  [data-work-order-daily-report-modal],
  [data-work-order-material-modal],
  [data-work-order-cost-modal],
  [data-work-order-report-package-modal] {
    align-items: stretch !important;
    padding: 0 !important;
  }
  [data-work-order-daily-report-modal] .wo-child-modal,
  [data-work-order-material-modal] .wo-child-modal,
  [data-work-order-cost-modal] .wo-child-modal,
  [data-work-order-report-package-modal] .wo-child-modal {
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-header,
  [data-work-order-material-modal] .wo-child-modal-header,
  [data-work-order-cost-modal] .wo-child-modal-header,
  [data-work-order-report-package-modal] .wo-child-modal-header {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: start !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-header > div:first-child,
  [data-work-order-material-modal] .wo-child-modal-header > div:first-child,
  [data-work-order-cost-modal] .wo-child-modal-header > div:first-child,
  [data-work-order-report-package-modal] .wo-child-modal-header > div:first-child {
    grid-column: 1;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-header > div:nth-child(2),
  [data-work-order-material-modal] .wo-child-modal-header > div:nth-child(2),
  [data-work-order-cost-modal] .wo-child-modal-header > div:nth-child(2),
  [data-work-order-report-package-modal] .wo-child-modal-header > div:nth-child(2) {
    grid-column: 2;
    min-width: 0;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-header > button.btn--icon,
  [data-work-order-material-modal] .wo-child-modal-header > button.btn--icon,
  [data-work-order-cost-modal] .wo-child-modal-header > button.btn--icon,
  [data-work-order-report-package-modal] .wo-child-modal-header > button.btn--icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-header > .chip,
  [data-work-order-material-modal] .wo-child-modal-header > .chip,
  [data-work-order-cost-modal] .wo-child-modal-header > .chip,
  [data-work-order-report-package-modal] .wo-child-modal-header > .chip,
  [data-work-order-daily-report-modal] .wo-child-modal-header > button:not(.btn--icon),
  [data-work-order-material-modal] .wo-child-modal-header > button:not(.btn--icon),
  [data-work-order-cost-modal] .wo-child-modal-header > button:not(.btn--icon),
  [data-work-order-report-package-modal] .wo-child-modal-header > button:not(.btn--icon) {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
  [data-work-order-daily-report-modal] .wo-child-modal-body,
  [data-work-order-material-modal] .wo-child-modal-body,
  [data-work-order-cost-modal] .wo-child-modal-body,
  [data-work-order-report-package-modal] .wo-child-modal-body {
    padding: 14px 12px !important;
  }
  [data-work-order-delivery-billing-modal] {
    align-items: stretch !important;
    padding: 0 !important;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-dialog {
    width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh;
    border-radius: 0 !important;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header,
  [data-work-order-delivery-billing-modal] .wo-delivery-body {
    padding: 12px !important;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    align-items: start !important;
    gap: 10px !important;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header > div:first-child {
    grid-column: 1;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header > div:nth-child(2) {
    grid-column: 2;
    min-width: 0;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header > .chip {
    grid-column: 1 / -1;
    justify-self: start;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header > button:not(.btn--icon) {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
  [data-work-order-delivery-billing-modal] .wo-delivery-header > button.btn--icon {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  [data-work-order-delivery-billing-modal] .wo-wide-table tr {
    grid-template-columns: 1fr;
    padding: 10px;
  }
  [data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(11),
  [data-work-order-delivery-billing-modal] .wo-wide-table td:nth-child(12) {
    grid-column: auto;
  }
}

.wo-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { .wo-kanban { grid-template-columns: 1fr; } }
.wo-kanban-col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; min-height: 120px; }
.wo-kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--border); }
.wo-kanban-col.todo  .wo-kanban-col-head { border-bottom-color: var(--info-500); }
.wo-kanban-col.doing .wo-kanban-col-head { border-bottom-color: var(--warning-500); }
.wo-kanban-col.qc    .wo-kanban-col-head { border-bottom-color: var(--primary); }
.wo-kanban-col-title { font-weight: 700; color: var(--fg-strong); font-size: 14px; }
.wo-kanban-col-count { font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.wo-kanban-cards { display: flex; flex-direction: column; gap: 8px; }
.wo-kanban-empty { color: var(--fg-subtle); font-size: 12px; padding: 12px 4px; text-align: center; }
.wo-kanban-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 12px; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.wo-kanban-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.wo-kanban-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wo-kanban-card.is-selected { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.wo-kanban-card.late { border-left: 4px solid var(--danger); }
.wo-kc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wo-kc-no { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.wo-kc-late { font-size: 11px; font-weight: 700; color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-full); padding: 1px 8px; }
.wo-kc-item { font-size: 15px; font-weight: 700; color: var(--fg-strong); line-height: 1.3; margin-top: 4px; }
.wo-kc-customer { font-size: 13px; color: var(--fg); margin-top: 2px; }
.wo-kc-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.wo-kc-due.late { color: var(--danger); font-weight: 600; }
.wo-kc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.wo-kc-station { font-size: 12px; color: var(--fg-muted); }

/* === 工單詳情：管理 / 工務 角色視角切換（Phase 3） === */
.wo-detail-modeswitch {
  display: flex;
  align-items: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  flex-wrap: wrap;
}
.wo-detail-modeswitch button {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 13px;
}
.wo-detail-modeswitch button.active { background: var(--primary-soft); color: var(--primary-press); border-color: var(--primary); }
.wo-detail-modeswitch .vm-hint {
  max-width: 380px;
  font-size: 12px;
  color: var(--fg-subtle);
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === 工單管理：工具列（Phase 4，匯出/派工進度 + 延後功能導引入口） === */
.wo-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.wo-toolbar-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.wo-toolbar-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.wo-toolbar-planned-label { font-size: 12px; color: var(--fg-subtle); }
.wo-toolbar-planned { opacity: 0.75; border-style: dashed; }
.wo-toolbar-planned:hover { opacity: 1; }
/* 範圍選取後出現的批次操作列 */
.wo-batch-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 8px 12px; background: var(--primary-soft); border: 1px solid var(--primary); border-radius: var(--radius-md); }
.wo-batch-count { font-size: 13px; font-weight: 600; color: var(--primary-press); margin-right: 2px; }

@media (max-width: 980px) {
  .wo-op-shell-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .wo-op-demo-skin .wo-op-shell-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    height: auto;
    padding: 10px;
  }
  .wo-op-demo-skin .wo-op-title {
    min-width: 0;
  }
  .wo-op-view-tabs,
  .wo-op-actions {
    width: 100%;
  }
  .wo-op-demo-skin .wo-op-view-tabs,
  .wo-op-demo-skin .wo-op-actions {
    width: 100%;
  }
  .wo-op-actions {
    justify-content: flex-start;
  }
  .wo-op-demo-skin .wo-op-actions {
    justify-content: flex-start;
  }
  .wo-op-list-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .wo-op-demo-skin .wo-op-list-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
  .wo-op-toolbar-actions {
    justify-content: flex-start;
  }
  .wo-op-demo-skin .wo-op-toolbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .wo-op-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .wo-op-demo-skin .wo-op-view-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .wo-op-view-tabs button,
  .wo-op-actions .btn {
    min-width: 0;
  }
  .wo-op-demo-skin .wo-op-view-tabs button,
  .wo-op-demo-skin .wo-op-actions .btn {
    min-width: 0;
  }
  .wo-op-actions {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .wo-op-demo-skin .wo-op-actions {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .wo-op-actions .btn--primary {
    justify-content: center;
  }
  .wo-op-demo-skin .wo-op-actions .btn--primary {
    justify-content: center;
  }
  .wo-op-list-shell,
  .wo-op-kanban-shell {
    margin-inline: -2px;
  }
  .wo-op-demo-skin .wo-op-list-shell,
  .wo-op-demo-skin .wo-op-kanban-shell {
    margin-inline: -2px;
  }
  .wo-op-status-chip {
    height: 32px;
  }
  .wo-op-demo-skin .wo-op-status-chip {
    height: 32px;
  }
}