/* 售后列表：统一工作台视觉尺度。业务状态和动作由原有页面负责。 */
:root {
  --wb-canvas: #f3f5f4;
  --wb-surface: #ffffff;
  --wb-surface-muted: #f7f9f8;
  --wb-ink: #202d2b;
  --wb-muted: #52635f;
  --wb-border: #d5dfdc;
  --wb-border-strong: #aabcb6;
  --wb-accent: #23685e;
  --wb-accent-dark: #174d45;
  --wb-accent-soft: #e4f0ec;
  --wb-alert: #934e20;
  --wb-alert-soft: #fbf0e6;
  --wb-danger: #923d36;
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 24px;
  --wb-radius: 6px;
  --wb-control-height: 34px;
  --wb-text: 13px;
  --wb-label: 12px;
  --wb-line: 1.45;
  --wb-shadow: 0 4px 12px rgb(25 47 42 / 9%);
  --wb-focus: #176b8a;
  --wb-alert-border: #d8bd9e;
  --wb-alert-ink: #70401e;
  --wb-hover: #e8eeeb;
  --wb-active-border: #8ab2a6;
  --wb-count: #e6eeeb;
  --wb-count-active: #cfe3dc;
  --wb-selection: #bdded3;
  --wb-table-header: #edf2ef;
  --wb-table-heading: #354a44;
  --wb-row-border: #e3eae7;
  --wb-row-hover: #f2f7f4;
  --wb-white: #ffffff;
  --wb-error-bg: #fff0ed;
  --wb-progress-bg: #e8f2fa;
  --wb-progress-ink: #245675;
  --wb-done-bg: #e8f3ed;
  --wb-done-ink: #285e42;
}
body { background: var(--wb-canvas); color: var(--wb-ink); }
#mainApp .header { padding: var(--wb-space-3) var(--wb-space-4); border-color: var(--wb-border); background: var(--wb-surface); }
#mainApp .header-title { font-weight: 650; color: var(--wb-ink); font-size: 16px; }
#stickyHeader { box-shadow: var(--wb-shadow) !important; }
.workbench-toolbar, .workbench-filters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--wb-space-2); padding: var(--wb-space-3) var(--wb-space-4);
  background: var(--wb-surface); border-bottom: 1px solid var(--wb-border);
}
.workbench-toolbar > button[id^="btnPending"], #noFollowTodayBtn {
  display: inline-flex; align-items: baseline; gap: var(--wb-space-2);
  min-height: var(--wb-control-height); padding: var(--wb-space-2) var(--wb-space-3);
  border: 1px solid var(--wb-border); border-radius: var(--wb-radius);
  background: var(--wb-surface-muted) !important; color: var(--wb-ink);
  font: inherit; font-size: var(--wb-label); cursor: pointer; white-space: nowrap;
}
.workbench-toolbar > button[id^="btnPending"] strong,
.workbench-toolbar > button[id^="btnPending"] span:last-child,
#noFollowTodayBtn span:last-child { color: var(--wb-ink); font-size: var(--wb-text); font-weight: 700; font-variant-numeric: tabular-nums; }
#btnPending span:first-child, #noFollowTodayBtn span:first-child { display: none; }
#noFollowTodayBtn { border-color: var(--wb-alert-border); background: var(--wb-alert-soft) !important; color: var(--wb-alert-ink); }
.workbench-toolbar button[id^="btnPending"]:hover, #noFollowTodayBtn:hover { border-color: var(--wb-accent); }
.workbench-search { flex: 1 1 240px; min-width: 190px; }
.workbench-order-search { flex: 0 1 220px; min-width: 180px; }
.workbench-search input, .workbench-order-search input {
  display: block; width: 100%; min-height: var(--wb-control-height);
  padding: var(--wb-space-2) var(--wb-space-3) !important;
  border: 1px solid var(--wb-border-strong) !important; border-radius: var(--wb-radius) !important;
  background: var(--wb-surface) !important; color: var(--wb-ink) !important;
  font-size: var(--wb-text) !important; outline: revert !important;
}
.workbench-search input::placeholder, .workbench-order-search input::placeholder { color: var(--wb-muted); opacity: 1; }
.workbench-actions { display: flex; align-items: center; gap: var(--wb-space-2); flex-wrap: wrap; }
.workbench-toolbar .btn, .workbench-filters .btn, .workbench-filters select, #mainTable .btn {
  min-height: var(--wb-control-height); padding: 6px var(--wb-space-3);
  color: var(--wb-ink); background: var(--wb-surface); border: 1px solid var(--wb-border-strong);
  border-radius: var(--wb-radius); font-size: var(--wb-text); line-height: var(--wb-line);
}
.workbench-toolbar .btn-primary, .workbench-filters .btn-primary {
  color: var(--wb-white); background: var(--wb-accent); border-color: var(--wb-accent);
}
.workbench-toolbar .btn-primary:hover, .workbench-filters .btn-primary:hover { background: var(--wb-accent-dark); }
.workbench-toolbar .btn:not(.btn-primary):hover, .workbench-filters .btn:not(.btn-primary):hover, #mainTable .btn:hover { background: var(--wb-accent-soft); }
#filterStatusBar { color: var(--wb-muted) !important; font-size: var(--wb-label) !important; }
#filterStatusText { color: var(--wb-muted) !important; }
#clearFilterBtnNew { color: var(--wb-danger); background: var(--wb-surface); border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius); padding: var(--wb-space-1) var(--wb-space-2); cursor: pointer; }
.workbench-spacer { flex: 1 1 auto; }
.workbench-separator { display: none; }
.workbench-filters { background: var(--wb-surface-muted); padding-block: var(--wb-space-2); }
.workbench-filters #typeFilter, .workbench-filters #statusFilter { width: auto; min-width: 118px; }
.workbench-pagination { display: flex; align-items: center; gap: var(--wb-space-1); margin-left: auto; color: var(--wb-muted); font-size: var(--wb-label); }
.workbench-pagination #pageSizeSelector { min-width: 72px; width: auto; }
.workbench-filters .quick-filters { order: 3; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-1); margin: 0; }
.workbench-filters .filter-tag {
  display: inline-flex; align-items: center; gap: var(--wb-space-1);
  min-height: 30px; padding: var(--wb-space-1) var(--wb-space-2);
  border: 1px solid transparent; border-radius: var(--wb-radius);
  background: transparent; color: var(--wb-muted); font: inherit; font-size: var(--wb-label);
  line-height: var(--wb-line); white-space: nowrap; cursor: pointer;
}
.workbench-filters .filter-tag:hover { background: var(--wb-hover); color: var(--wb-ink); }
.workbench-filters .filter-tag.active { background: var(--wb-accent-soft); border-color: var(--wb-active-border); color: var(--wb-accent-dark); font-weight: 700; }
.workbench-filters .filter-tag .count { margin: 0; padding: 1px 5px; border-radius: var(--wb-radius); background: var(--wb-count); color: var(--wb-ink); font-size: var(--wb-label); font-weight: 650; font-variant-numeric: tabular-nums; }
.workbench-filters .filter-tag.active .count { background: var(--wb-count-active); }
#mainApp :is(.header, #stickyHeader, .main-content, .workbench-bottom-pagination) :is(button, input, select, a, [tabindex]):focus-visible { outline: 3px solid var(--wb-focus) !important; outline-offset: 2px; }
#mainApp :is(.header, #stickyHeader, .main-content, .workbench-bottom-pagination) button:disabled { opacity: .58; cursor: not-allowed; }
#mainApp :is(.header, #stickyHeader, .main-content, .workbench-bottom-pagination) ::selection { background: var(--wb-selection); color: var(--wb-ink); }
.main-content { min-height: calc(100vh - 250px); background: var(--wb-surface); overflow-x: auto; }
#mainTable { width: 100%; min-width: 1420px; font-variant-numeric: tabular-nums; }
#mainTable thead th { position: sticky; top: 0; background: var(--wb-table-header); color: var(--wb-table-heading); font-size: var(--wb-label); font-weight: 700; text-align: left; padding: 10px var(--wb-space-3); border-bottom: 1px solid var(--wb-border-strong); }
#mainTable tbody td { padding: var(--wb-space-3); color: var(--wb-ink); border-color: var(--wb-row-border); font-size: var(--wb-text); line-height: 1.5; overflow-wrap: anywhere; }
#mainTable tbody tr:hover { background: var(--wb-row-hover); }
#mainTable .tma-table-secondary { color: var(--wb-muted); font-size: var(--wb-label); }
#mainTable .afs-order-identity { font-weight: 700; }
#mainTable .afs-latest-message { white-space: normal; overflow-wrap: anywhere; }
#mainTable td:last-child .btn { margin: 0 var(--wb-space-1) var(--wb-space-1) 0; }
@media (max-width: 980px) {
  #stickyHeader { position: relative !important; }
  .workbench-search { flex-grow: 1; }
  .workbench-order-search { flex-grow: 1; }
  .workbench-actions { flex: 1 1 100%; }
  .workbench-filters .quick-filters { order: 3; }
  .workbench-pagination { margin-left: 0; }
}
@media (max-width: 580px) {
  .workbench-toolbar, .workbench-filters { padding-inline: var(--wb-space-2); }
  .workbench-search, .workbench-order-search { flex: 1 1 100%; }
  .workbench-spacer { display: none; }
  .workbench-pagination { flex-wrap: wrap; }
}

/* 阅读中的状态需要文字和足够对比度，仍沿用原业务状态分类。 */
#mainTable th:nth-child(1) { width: 15%; }
#mainTable th:nth-child(2) { width: 12%; }
#mainTable th:nth-child(3) { width: 11%; }
#mainTable th:nth-child(4) { width: 12%; }
#mainTable th:nth-child(5) { width: 10%; }
#mainTable th:nth-child(6) { width: 12%; }
#mainTable th:nth-child(7) { width: 10%; }
#mainTable th:nth-child(8) { width: 11%; }
#mainTable th:nth-child(9) { width: 7%; min-width: 100px; }
#mainTable td:last-child .btn { display: block; min-width: 76px; }
#mainTable .status-tag { font-size: var(--wb-label); }
#mainTable .status-tag.pending { color: var(--wb-alert-ink); background: var(--wb-alert-soft); }
#mainTable .status-tag.processing { color: var(--wb-progress-ink); background: var(--wb-progress-bg); }
#mainTable .status-tag.done { color: var(--wb-done-ink); background: var(--wb-done-bg); }
#mainTable .status-tag.cancelled { color: var(--wb-muted); background: var(--wb-hover); }
#mainTable :is(.afs-warning, .afs-money-pending) { color: var(--wb-alert-ink); }
#mainTable .afs-task-capsule { color: var(--wb-alert-ink); background: var(--wb-alert-soft); border-color: var(--wb-alert-border); font-size: var(--wb-label); }
#mainTable :is(.today-miss-badge, .overdue-badge) { color: var(--wb-danger); background: var(--wb-error-bg); }
@media (max-width: 580px) {
  #mainApp .header { flex-wrap: wrap; gap: var(--wb-space-2); }
  #mainApp .user-info { flex-wrap: wrap; }
  #mainApp .user-dropdown-btn { white-space: nowrap; }
}

#mainApp #userRoleBadge { color: var(--wb-white); background: var(--wb-accent-dark) !important; }
.workbench-bottom-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--wb-space-2); padding: var(--wb-space-3) var(--wb-space-5); background: var(--wb-surface-muted); border-top: 1px solid var(--wb-border); }
.workbench-bottom-pagination .btn { min-height: var(--wb-control-height); color: var(--wb-ink); background: var(--wb-surface); border-color: var(--wb-border-strong); }
/* 鼠标、脚本和键盘获得焦点时均显示可辨认的轮廓。 */
#mainApp :is(.header, #stickyHeader, .main-content, .workbench-bottom-pagination) :is(button, input, select, a, [tabindex]):focus { outline: 3px solid var(--wb-focus) !important; outline-offset: 2px; }