/* Native module layout: one authenticated shell, persistent controllers and scoped module surfaces. */
.native-module {
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--app-bg, #f2f5f9);
}

.native-module > [data-node="recordsView"],
.native-after-sales > :is([data-node="appView"], #appView) {
  display: block;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.legacy-native-module :is(
  .fulfillment-dispatch-workspace,
  .customization-workspace,
  .partnership-workspace,
  .supplier-confirmation-workspace,
  .conversation-workspace
) {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--app-bg, #f2f5f9);
}

.legacy-native-module :is(
  .fulfillment-dispatch-sidebar,
  .customization-sidebar,
  .partnership-sidebar,
  .supplier-confirmation-sidebar,
  .conversation-sidebar
) {
  position: static;
  grid-column: 1;
  grid-row: 1;
  width: auto;
  min-width: 0;
  max-height: none;
  margin: 0;
  padding: 14px;
  border: 0;
  border-right: 1px solid var(--line, #d8e1ec);
  border-bottom: 1px solid var(--line, #d8e1ec);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.legacy-native-module :is(
  .fulfillment-dispatch-sidebar nav,
  .customization-sidebar nav,
  .partnership-sidebar nav,
  .supplier-confirmation-sidebar nav,
  .conversation-sidebar nav
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.legacy-native-module :is(
  .fulfillment-dispatch-sidebar nav button,
  .customization-sidebar nav button,
  .partnership-sidebar nav button,
  .supplier-confirmation-sidebar nav button,
  .conversation-sidebar nav button
) {
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
}

.legacy-native-module :is(
  .fulfillment-dispatch-refresh-meta,
  .customization-refresh-meta,
  .partnership-refresh-meta,
  .supplier-confirmation-refresh-meta,
  .conversation-refresh-meta
) { display: none; }

.legacy-native-module :is(
  .fulfillment-dispatch-list-column,
  .customization-list-column,
  .partnership-list-column,
  .supplier-confirmation-list-column,
  .conversation-list-column
) {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  border: 0;
  border-right: 1px solid var(--line, #d8e1ec);
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.legacy-native-module :is(
  .fulfillment-dispatch-list,
  .customization-list,
  .partnership-list,
  .supplier-confirmation-list,
  .conversation-list
) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}

.legacy-native-module :is(
  .fulfillment-dispatch-detail,
  .customization-detail,
  .partnership-detail,
  .supplier-confirmation-detail,
  .conversation-detail
) {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: auto;
  min-width: 0;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px 20px 92px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--app-bg, #f2f5f9);
  scrollbar-gutter: stable;
}

.legacy-native-module :is(
  .fulfillment-dispatch-detail-card,
  .customization-detail-card,
  .partnership-detail-card,
  .supplier-confirmation-detail-card,
  .conversation-detail-card
) {
  width: 100%;
  max-width: none;
  border: 1px solid var(--line, #d8e1ec);
  border-radius: 12px;
  box-shadow: none;
  background: #fff;
}

.legacy-native-module :is(
  .fulfillment-dispatch-list-item.selected,
  .customization-list-item.active,
  .partnership-list-item[aria-selected="true"],
  .supplier-confirmation-list-item.selected,
  .conversation-list-item.active,
  .conversation-list-item[aria-selected="true"]
) {
  border-color: #1481e7;
  box-shadow: none;
  background: #edf6ff;
}

.legacy-native-module :is(input, select, textarea, button) { border-radius: 8px; }
.legacy-native-module :is(.status-warning, .status-progress, .status-success, .status-neutral, .status-danger) { border-radius: 999px; }

/* After-sales is kept inside the same native shell; all rules are deliberately root-scoped. */
.native-after-sales {
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink, #132238);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.native-after-sales * { box-sizing: border-box; }
.native-after-sales .hidden { display: none !important; }
.native-after-sales button,
.native-after-sales input,
.native-after-sales select,
.native-after-sales textarea { font: inherit; }
.native-after-sales button {
  min-height: 36px;
  padding: 8px 14px;
  color: #fff;
  font-weight: 700;
  border: 1px solid #0075de;
  border-radius: 8px;
  background: #0075de;
  cursor: pointer;
}
.native-after-sales button:hover { filter: brightness(.96); }
.native-after-sales button:focus-visible,
.native-after-sales :is(input, select, textarea):focus-visible { outline: 3px solid rgba(0, 117, 222, .2); outline-offset: 1px; }
.native-after-sales button.ghost,
.native-after-sales .icon-button.ghost { color: #24405f; border-color: #cfd9e6; background: #fff; }
.native-after-sales :is(input, select, textarea) {
  width: 100%;
  padding: 9px 11px;
  color: #132238;
  border: 1px solid #cfd9e6;
  border-radius: 8px;
  background: #fff;
}
.native-after-sales textarea { resize: vertical; }
.native-after-sales label { display: grid; gap: 6px; color: #486077; font-size: 14px; font-weight: 700; }

.native-after-sales .notice {
  position: fixed;
  z-index: 60;
  top: 16px;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  transform: translateX(-50%);
  color: #0f604a;
  font-weight: 700;
  border: 1px solid #9ed7c4;
  border-radius: 10px;
  background: #ecf8f3;
}
.native-after-sales .notice.error { color: #b52821; border-color: #f3b8b4; background: #fff0ef; }

.native-after-sales .after-sales-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f2f5f9;
}
.native-after-sales .card { min-width: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.native-after-sales .queue-panel {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid #d8e1ec;
  border-bottom: 1px solid #d8e1ec;
}
.native-after-sales .list-panel {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  padding: 12px 14px;
  overflow: hidden;
  border-right: 1px solid #d8e1ec;
}
.native-after-sales .detail-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 18px 22px 96px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #f2f5f9;
  scrollbar-gutter: stable;
}
.native-after-sales :is(.panel-heading, .detail-head, .section-heading) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.native-after-sales :is(.panel-heading h2, .detail-head h2, .section-heading h3) { margin: 0; }
.native-after-sales .panel-kicker { margin: 0 0 4px; color: #0075de; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.native-after-sales .status-queue-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.native-after-sales .status-queue-nav button { display: flex; justify-content: space-between; min-width: 0; color: #29445f; border-color: #d7e0eb; background: #f7f9fc; }
.native-after-sales .status-queue-nav button.active { color: #fff; border-color: #0075de; background: #0075de; }
.native-after-sales .queue-meta { display: none; }
.native-after-sales .list-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.native-after-sales .wide-field { grid-column: 1 / -1; }
.native-after-sales .list-filters > button { grid-column: 1 / -1; }
.native-after-sales .count-badge,
.native-after-sales .ticket-number,
.native-after-sales .badges span { display: inline-flex; border-radius: 999px; }
.native-after-sales .inline-feedback { padding: 10px; color: #8b5a00; border: 1px solid #f0c562; border-radius: 8px; background: #fff7df; }
.native-after-sales .ticket-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.native-after-sales .ticket-list button {
  display: grid;
  width: 100%;
  margin: 0 0 7px;
  padding: 12px;
  color: #132238;
  text-align: left;
  border: 1px solid #d8e1ec;
  border-radius: 10px;
  background: #fff;
}
.native-after-sales .ticket-list button:hover { background: #f7f9fc; }
.native-after-sales .ticket-list button[aria-selected="true"],
.native-after-sales .ticket-list button.active { border-color: #1481e7; box-shadow: none; background: #edf6ff; }
.native-after-sales .pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.native-after-sales #ticketDetail { display: grid; gap: 14px; }
.native-after-sales .detail-head,
.native-after-sales :is(.context-grid, .editor, .notes-section, .replacement-dispatch, .read-only-panel) {
  border: 1px solid #d8e1ec;
  border-radius: 12px;
  background: #fff;
}
.native-after-sales .detail-head { padding: 18px; }
.native-after-sales .detail-head h2 { overflow-wrap: anywhere; }
.native-after-sales .detail-head p { margin-bottom: 0; color: #667c91; overflow-wrap: anywhere; }
.native-after-sales .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.native-after-sales .badges span { padding: 5px 9px; color: #31506d; background: #eaf2fa; }
.native-after-sales .context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; overflow: hidden; }
.native-after-sales .context-grid > div { padding: 14px; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
.native-after-sales .context-grid dt { color: #73879a; font-size: 14px; }
.native-after-sales .context-grid dd { margin: 5px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.native-after-sales :is(.editor, .notes-section, .replacement-dispatch, .read-only-panel) { padding: 18px; }
.native-after-sales .editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.native-after-sales .editor-grid .wide-field { grid-column: 1 / -1; }
.native-after-sales .sticky-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.native-after-sales .note-list { display: grid; gap: 8px; margin: 14px 0; }
.native-after-sales .note-list article { padding: 12px; border: 1px solid #e0e7ef; border-radius: 10px; background: #f8fafc; }
.native-after-sales .note-form { display: grid; gap: 10px; }
.native-after-sales .empty-state { display: grid; min-height: 220px; place-content: center; text-align: center; color: #64798d; border: 1px dashed #c8d5e3; border-radius: 12px; background: #fff; }
.native-after-sales .error-summary,
.native-after-sales .conflict-panel { padding: 12px; color: #a32720; border: 1px solid #efb2ad; border-radius: 8px; background: #fff0ef; }

@media (max-width: 1050px) {
  .legacy-native-module :is(
    .fulfillment-dispatch-workspace,
    .customization-workspace,
    .partnership-workspace,
    .supplier-confirmation-workspace,
    .conversation-workspace
  ),
  .native-after-sales .after-sales-workspace { grid-template-columns: 290px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .native-module { height: auto; min-height: calc(100vh - 58px); overflow: visible; }
  .native-after-sales > :is([data-node="appView"], #appView) { height: auto; overflow: visible; }
  .legacy-native-module :is(
    .fulfillment-dispatch-workspace,
    .customization-workspace,
    .partnership-workspace,
    .supplier-confirmation-workspace,
    .conversation-workspace
  ),
  .native-after-sales .after-sales-workspace { display: block; height: auto; overflow: visible; }
  .legacy-native-module :is(
    .fulfillment-dispatch-sidebar,
    .customization-sidebar,
    .partnership-sidebar,
    .supplier-confirmation-sidebar,
    .conversation-sidebar,
    .fulfillment-dispatch-list-column,
    .customization-list-column,
    .partnership-list-column,
    .supplier-confirmation-list-column,
    .conversation-list-column
  ),
  .native-after-sales :is(.queue-panel, .list-panel) { border-right: 0; border-bottom: 1px solid #d8e1ec; }
  .legacy-native-module :is(
    .fulfillment-dispatch-detail,
    .customization-detail,
    .partnership-detail,
    .supplier-confirmation-detail,
    .conversation-detail
  ),
  .native-after-sales .detail-panel { height: auto; max-height: none; padding: 14px 12px 88px; overflow: visible; }
  .legacy-native-module :is(
    .fulfillment-dispatch-list,
    .customization-list,
    .partnership-list,
    .supplier-confirmation-list,
    .conversation-list
  ),
  .native-after-sales .ticket-list { max-height: 52vh; }
  .native-after-sales :is(.context-grid, .editor-grid) { grid-template-columns: 1fr; }
  .native-after-sales .context-grid > div,
  .native-after-sales .editor-grid .wide-field { grid-column: auto; }
}

/* After-sales workbench: shared order/procurement visual contract. */
.native-after-sales {
  color: var(--ink, #0f172a);
  font-family: var(--za-font-sans, Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .after-sales-workspace { background: var(--paper, #f2f5f9); }
.native-after-sales .queue-panel { padding: 14px 14px 12px; }
.native-after-sales .list-panel { padding: 12px 14px; }
.native-after-sales .detail-panel { padding: 14px 18px 26px; }
.native-after-sales :is(.queue-panel, .list-panel) { background: var(--surface, #fff); }

.native-after-sales button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: #344054;
  font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  font-weight: 600;
  transition: border-color var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease, color var(--motion-fast, 120ms) ease, transform var(--motion-fast, 120ms) ease;
}
.native-after-sales button:hover:not(:disabled) {
  border-color: var(--blue, #0075de);
  background: var(--blue-soft, #edf6ff);
  color: var(--blue, #0075de);
  filter: none;
}
.native-after-sales button:active:not(:disabled) { transform: scale(.97); }
.native-after-sales button[type="submit"],
.native-after-sales .search-button,
.native-after-sales .status-queue-nav button[aria-current="page"] {
  border-color: #0075de;
  background: #0075de;
  color: #fff;
}
.native-after-sales button[type="submit"]:hover:not(:disabled),
.native-after-sales .search-button:hover:not(:disabled),
.native-after-sales .status-queue-nav button[aria-current="page"]:hover:not(:disabled) {
  border-color: #0069c7;
  background: #0069c7;
  color: #fff;
}
.native-after-sales button:focus-visible,
.native-after-sales :is(input, select, textarea):focus-visible {
  border-color: #0075de;
  outline: 2px solid #0075de;
  outline-offset: 2px;
}
.native-after-sales button:disabled { cursor: not-allowed; opacity: .52; }

.native-after-sales :is(.panel-heading, .detail-head, .section-heading) { align-items: center; }
.native-after-sales .panel-heading h2 { color: var(--ink, #0f172a); font: var(--za-type-panel, 700 22px/30px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .panel-kicker {
  margin: 0 0 3px;
  color: #0075de;
  font: var(--za-type-status, 600 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  letter-spacing: .04em;
}
.native-after-sales .after-sales-sidebar-head { display: grid; gap: 4px; }
.native-after-sales .after-sales-sidebar-head h2 { margin: 0; color: var(--ink, #0f172a); font: var(--za-type-panel, 700 22px/30px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .after-sales-sidebar-head p { margin: 0; color: var(--muted, #64748b); font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .icon-button.refresh-button {
  display: grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  place-items: center;
  white-space: nowrap;
}
.native-after-sales .ui-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.native-after-sales .status-queue-nav { gap: 6px; margin-top: 12px; }
.native-after-sales .status-queue-nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 42px;
  padding: 0 10px;
  overflow: hidden;
  border-color: var(--line, #dce3ec);
  background: var(--surface-muted, #f7f9fc);
  color: #475467;
  font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  font-weight: 600;
  white-space: nowrap;
}
.native-after-sales .status-queue-nav button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.native-after-sales .queue-count {
  display: inline-flex;
  min-width: 23px;
  height: 20px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #e8edf3;
  color: #475467;
  font: var(--za-type-status, 600 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.native-after-sales .status-queue-nav button[aria-current="page"] .queue-count { background: rgba(255, 255, 255, .2); color: #fff; }

.native-after-sales .list-panel > .panel-heading { min-height: 38px; }
.native-after-sales .count-badge {
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: var(--blue-soft, #edf6ff);
  color: #075eaa;
  font: var(--za-type-status, 600 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .list-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, #dce3ec);
}
.native-after-sales .list-filters label { gap: 5px; color: #475467; font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); font-weight: 600; }
.native-after-sales .after-sales-search-row {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
}
.native-after-sales .after-sales-search-label { gap: 0; }
.native-after-sales .after-sales-search-field { position: relative; display: block; min-width: 0; }
.native-after-sales .list-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 9px;
  border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  transition: border-color var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease;
}
.native-after-sales .list-filters input { height: 42px; padding-right: 43px; }
.native-after-sales .list-filters :is(input, select):hover { border-color: #9fb9d2; }
.native-after-sales .after-sales-search-field .search-button {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
}

.native-after-sales .ticket-list { display: grid; align-content: start; gap: 7px; }
.native-after-sales .ticket-list button.ticket-item {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--ink, #0f172a);
  text-align: left;
  transition: border-color var(--motion-fast, 120ms) ease, background var(--motion-fast, 120ms) ease, transform var(--motion-normal, 180ms) var(--ease-out, ease-out);
}
.native-after-sales .ticket-list button.ticket-item:hover:not(:disabled) { border-color: #9fc8ed; background: #f8fbff; color: var(--ink, #0f172a); transform: translateY(-1px); }
.native-after-sales .ticket-list button.ticket-item[aria-selected="true"] { border-color: #58a8ef; background: var(--surface-selected, #eef5ff); color: var(--ink, #0f172a); }
.native-after-sales .ticket-top,
.native-after-sales .ticket-meta,
.native-after-sales .badges { display: flex; min-width: 0; align-items: center; gap: 6px; }
.native-after-sales .ticket-top { justify-content: space-between; }
.native-after-sales .ticket-number { color: #0075de; font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); font-weight: 600; letter-spacing: .02em; }
.native-after-sales .ticket-subject { overflow: hidden; font: var(--za-type-list, 600 16px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.native-after-sales .ticket-meta { color: var(--muted, #64748b); font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .ticket-linkage { justify-content: space-between; }
.native-after-sales .ticket-customer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.native-after-sales .ticket-order { flex: 0 0 auto; }
.native-after-sales .ticket-state { flex-wrap: wrap; }
.native-after-sales .ticket-state time { margin-left: auto; white-space: nowrap; }

.native-after-sales .badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2f6;
  color: #475467;
  font: var(--za-type-status, 600 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .badge.priority-urgent { background: var(--red-soft, #fff0ed); color: var(--red, #c4321c); }
.native-after-sales .badge.priority-high,
.native-after-sales :is(.badge.status-new, .badge.status-triaged, .badge.status-waiting_customer, .badge.status-waiting_internal) { background: var(--amber-soft, #fff4d6); color: #8a4808; }
.native-after-sales .badge.status-in_progress { background: var(--blue-soft, #edf6ff); color: #075eaa; }
.native-after-sales :is(.badge.status-resolved, .badge.status-closed) { background: var(--green-soft, #e8f7f0); color: var(--green, #16835c); }
.native-after-sales .badge.status-cancelled { background: #eef2f6; color: #667085; }
.native-after-sales .pager { min-height: 46px; padding-top: 10px; border-top: 1px solid var(--line, #dce3ec); }
.native-after-sales .pager button { min-height: 40px; padding-inline: 10px; font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .pager span { color: var(--muted, #64748b); font: var(--za-type-caption, 400 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }

.native-after-sales #ticketDetail { width: min(1480px, 100%); margin: 0 auto; gap: 14px; }
.native-after-sales .detail-head,
.native-after-sales :is(.context-grid, .editor, .notes-section, .replacement-dispatch, .read-only-panel) {
  overflow: hidden;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: none;
}
.native-after-sales .detail-head { min-height: 92px; padding: 14px 16px; }
.native-after-sales .detail-head > div { min-width: 0; }
.native-after-sales .detail-head h2 { margin: 4px 0; font: var(--za-type-record, 700 26px/36px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .detail-head p { margin: 0; color: var(--muted, #64748b); font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .detail-head button { flex: 0 0 auto; }
.native-after-sales .badges { flex-wrap: wrap; margin: -2px 0 0; }

.native-after-sales .context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.native-after-sales .context-grid > div { padding: 12px 14px; border-color: var(--line, #dce3ec); background: #fff; }
.native-after-sales .context-grid > div:nth-child(2n) { border-right: 0; }
.native-after-sales .context-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.native-after-sales .context-grid dt { color: var(--muted, #64748b); font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .context-grid dd { margin-top: 5px; font: var(--za-type-body-strong, 600 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }

.native-after-sales :is(.editor, .notes-section, .replacement-dispatch) { padding: 0; }
.native-after-sales :is(.editor, .notes-section, .replacement-dispatch) > .section-heading {
  min-height: 58px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line, #dce3ec);
}
.native-after-sales .section-heading h3 { font: var(--za-type-section, 700 20px/28px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .editor-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 0;
  padding: 14px;
}
.native-after-sales .editor-grid .wide-field { grid-column: auto; }
.native-after-sales .editor-grid .requested-action-field { grid-column: span 2; }
.native-after-sales .editor-grid .resolution-field,
.native-after-sales .editor-grid .dispatch-items,
.native-after-sales .editor-grid .dispatch-notes-field { grid-column: 1 / -1; }
.native-after-sales .editor-grid label,
.native-after-sales .note-form label { color: #344054; font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); font-weight: 600; }
.native-after-sales .editor-grid :is(input, select, textarea),
.native-after-sales .note-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 8px;
  background: #fff;
  color: var(--ink, #0f172a);
  font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .editor-grid textarea { min-height: 88px; line-height: 22px; }
.native-after-sales .sticky-actions {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line, #dce3ec);
  background: var(--surface-muted, #f7f9fc);
}
.native-after-sales .sticky-actions .error { margin-right: auto; }

.native-after-sales .dispatch-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 8px;
  background: var(--surface-muted, #f7f9fc);
  color: var(--muted, #64748b);
  font: var(--za-type-body, 400 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .dispatch-context strong { color: var(--ink, #0f172a); }
.native-after-sales .dispatch-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.native-after-sales .dispatch-items {
  display: grid;
  min-width: 0;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line, #dce3ec);
  border-radius: 8px;
  background: #fff;
}
.native-after-sales .dispatch-items legend { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.native-after-sales .dispatch-item-tools {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, #dce3ec);
  background: var(--surface-muted, #f7f9fc);
  color: var(--muted, #64748b);
  font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.native-after-sales .dispatch-item-tools > div { display: flex; gap: 6px; }
.native-after-sales .dispatch-item-tools button { min-height: 40px; padding-inline: 10px; font: var(--za-type-control, 500 15px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .dispatch-item {
  display: grid;
  grid-template-columns: 18px minmax(220px, 1fr) minmax(150px, .45fr) auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line, #dce3ec);
  border-radius: 0;
  background: #fff;
}
.native-after-sales .dispatch-item:last-child { border-bottom: 0; }
.native-after-sales .dispatch-item > input[type="checkbox"] { width: 17px; min-height: 17px; height: 17px; margin: 0; accent-color: #0075de; }
.native-after-sales .dispatch-item-name { display: grid; min-width: 0; gap: 3px; }
.native-after-sales .dispatch-item-name :is(strong, small) { overflow-wrap: anywhere; }
.native-after-sales .dispatch-item-name strong { font: var(--za-type-body-strong, 600 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .dispatch-item-name small,
.native-after-sales .dispatch-item em,
.native-after-sales .dispatch-draft-note { color: var(--muted, #64748b); font: var(--za-type-caption, 400 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); font-style: normal; }
.native-after-sales .dispatch-quantity { display: grid; grid-template-columns: auto minmax(70px, 1fr); align-items: center; gap: 8px; color: var(--muted, #64748b); font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .dispatch-quantity input { min-height: 34px; padding-block: 0; }
.native-after-sales .dispatch-draft-note { order: -1; margin-right: auto; }

.native-after-sales .note-list { gap: 8px; margin: 0; padding: 14px; }
.native-after-sales .note-list article { padding: 11px 12px; border-radius: 8px; background: var(--surface-muted, #f7f9fc); }
.native-after-sales .note-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted, #64748b); font: var(--za-type-caption, 400 13px/20px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .note-list p { margin: 6px 0 0; font: var(--za-type-body, 400 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .note-form { display: grid; grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr); gap: 11px; padding: 14px; border-top: 1px solid var(--line, #dce3ec); background: var(--surface-muted, #f7f9fc); }
.native-after-sales .note-form .sticky-actions,
.native-after-sales .note-form .error-summary { grid-column: 1 / -1; }
.native-after-sales .note-form .sticky-actions { margin: 0 -14px -14px; }

.native-after-sales .notice {
  border-radius: 8px;
  background: var(--blue-soft, #edf6ff);
  border-color: #b9dcfb;
  color: #075eaa;
  font: var(--za-type-body-strong, 600 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
}
.native-after-sales .notice.error-notice { border-color: #f3b8b4; background: var(--red-soft, #fff0ed); color: var(--red, #c4321c); }
.native-after-sales :is(.inline-feedback, .error-summary, .conflict-panel, .read-only-panel) { border-radius: 8px; font: var(--za-type-label, 500 14px/22px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .empty-state { min-height: 220px; padding: 24px; }
.native-after-sales .empty-state strong { font: var(--za-type-card, 600 18px/26px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }
.native-after-sales .empty-state p { margin: 6px 0 0; font: var(--za-type-body, 400 15px/24px Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif); }

@media (max-width: 1180px) {
  .native-after-sales .editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .native-after-sales .editor-grid .requested-action-field { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .native-after-sales .after-sales-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .native-after-sales .detail-panel { padding-inline: 14px; }
  .native-after-sales .dispatch-item { grid-template-columns: 18px minmax(180px, 1fr) minmax(130px, .5fr); }
  .native-after-sales .dispatch-item > em { grid-column: 3; }
}

@media (max-width: 760px) {
  .native-after-sales .queue-panel { padding: 12px; }
  .native-after-sales .list-panel { padding: 12px; }
  .native-after-sales .detail-panel { padding: 12px 12px 88px; }
  .native-after-sales .ticket-list { max-height: 52vh; }
  .native-after-sales .detail-head { align-items: flex-start; }
}

@media (max-width: 520px) {
  .native-after-sales .status-queue-nav,
  .native-after-sales .list-filters,
  .native-after-sales .editor-grid,
  .native-after-sales .dispatch-options-grid,
  .native-after-sales .context-grid,
  .native-after-sales .note-form { grid-template-columns: 1fr; }
  .native-after-sales .wide-field,
  .native-after-sales .editor-grid .requested-action-field,
  .native-after-sales .editor-grid .resolution-field,
  .native-after-sales .editor-grid .dispatch-items,
  .native-after-sales .editor-grid .dispatch-notes-field,
  .native-after-sales .note-form .sticky-actions,
  .native-after-sales .note-form .error-summary { grid-column: auto; }
  .native-after-sales .detail-head,
  .native-after-sales .dispatch-context,
  .native-after-sales .dispatch-item-tools,
  .native-after-sales .sticky-actions { align-items: stretch; flex-direction: column; }
  .native-after-sales .detail-head button,
  .native-after-sales .sticky-actions button { width: 100%; }
  .native-after-sales .dispatch-context { margin-inline: 10px; }
  .native-after-sales .dispatch-item { grid-template-columns: 18px minmax(0, 1fr); }
  .native-after-sales .dispatch-quantity,
  .native-after-sales .dispatch-item > em { grid-column: 2; }
  .native-after-sales .note-form .sticky-actions { margin-inline: -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .native-after-sales button,
  .native-after-sales .ticket-list button.ticket-item,
  .native-after-sales .list-filters :is(input, select) { transition-duration: .01ms; }
}