@import url('./modal-secondary-compat.css?v=20260906d');

/*
 * 次级弹窗统一契约
 *
 * 适用范围：竞销态势、产品策划及其懒加载业务模块。
 * 目标：统一外层层级、可视区域、滚动边界、表面颜色和交互反馈；
 * 不干涉业务内容的表格、图表和字段布局。
 *
 * 结构契约由 ModalManager / syncModalToStack 自动补齐：
 * .modal-secondary-overlay > .modal-secondary-dialog
 */

/* 遮罩层：只负责隔离背景，不用业务模块各自发明 z-index。 */
body.wxt-v2 .modal-secondary-overlay,
body.compare-fresh .modal-secondary-overlay {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(23, 26, 24, 0.34) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overscroll-behavior: contain;
}

body.wxt-v2 .modal-secondary-overlay.active,
body.compare-fresh .modal-secondary-overlay.active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: modalSecondaryOverlayIn 180ms ease-out forwards !important;
}

body.wxt-v2 .modal-secondary-overlay.closing,
body.compare-fresh .modal-secondary-overlay.closing {
  display: flex !important;
  pointer-events: none;
  animation: modalSecondaryOverlayOut 160ms ease-in forwards !important;
}

body.wxt-v2 .modal-secondary-overlay.modal-overlay--nested,
body.compare-fresh .modal-secondary-overlay.modal-overlay--nested {
  background: rgba(23, 26, 24, 0.28) !important;
}

@keyframes modalSecondaryOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSecondaryOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 弹窗表面：宽度是“最大工作宽度”，实际宽度始终受视口约束。 */
body.wxt-v2 .modal-secondary-dialog,
body.compare-fresh .modal-secondary-dialog {
  box-sizing: border-box !important;
  width: min(var(--modal-width, 720px), calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: min(var(--modal-max-height, 760px), calc(100dvh - 32px)) !important;
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid var(--modal-secondary-line-strong) !important;
  border-radius: 12px !important;
  background: var(--modal-secondary-card) !important;
  color: var(--modal-secondary-text);
  box-shadow: var(--modal-secondary-shadow) !important;
  transform: none;
  animation: modalSecondaryDialogIn 200ms ease-out forwards !important;
}

body.wxt-v2 .modal-secondary-overlay.closing .modal-secondary-dialog,
body.compare-fresh .modal-secondary-overlay.closing .modal-secondary-dialog {
  animation: modalSecondaryDialogOut 150ms ease-in forwards !important;
}

/* 大型工作区/数据表类次级弹窗 */
body.wxt-v2 #skuSalesTrendModal .modal-secondary-dialog,
body.compare-fresh #skuSalesTrendModal .modal-secondary-dialog,
body.wxt-v2 #orderDataModal .modal-secondary-dialog,
body.compare-fresh #orderDataModal .modal-secondary-dialog,
body.wxt-v2 #orderReportModal .modal-secondary-dialog,
body.compare-fresh #orderReportModal .modal-secondary-dialog {
  --modal-width: 1400px;
  --modal-max-height: calc(100dvh - 32px);
}

body.wxt-v2 #codeValidationModal .modal-secondary-dialog,
body.compare-fresh #codeValidationModal .modal-secondary-dialog {
  --modal-width: 1500px;
  --modal-max-height: calc(100dvh - 32px);
}

body.wxt-v2 #compareSnapshotModal .modal-secondary-dialog,
body.compare-fresh #compareSnapshotModal .modal-secondary-dialog {
  --modal-width: 520px;
  --modal-max-height: calc(100dvh - 32px);
}

body.wxt-v2 #unifiedBatchFillModal .modal-secondary-dialog,
body.compare-fresh #unifiedBatchFillModal .modal-secondary-dialog {
  --modal-width: 920px;
  --modal-max-height: calc(100dvh - 32px);
}

body.wxt-v2 #batchFillModal .modal-secondary-dialog,
body.compare-fresh #batchFillModal .modal-secondary-dialog,
body.wxt-v2 #pdfExportModal .modal-secondary-dialog,
body.compare-fresh #pdfExportModal .modal-secondary-dialog {
  --modal-width: 520px;
  --modal-max-height: calc(100dvh - 32px);
}

@keyframes modalSecondaryDialogIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalSecondaryDialogOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(5px); }
}

/* 标准头部/正文/底部 */
body.wxt-v2 .modal-secondary-dialog > .modal-header,
body.compare-fresh .modal-secondary-dialog > .modal-header,
body.wxt-v2 .modal-secondary-dialog > .modal-footer,
body.compare-fresh .modal-secondary-dialog > .modal-footer {
  flex: 0 0 auto;
  min-width: 0;
  border-color: var(--modal-secondary-line) !important;
  border-radius: 0 !important;
  background: var(--modal-secondary-card) !important;
  animation: none !important;
}

/* 统一关闭操作：标题栏右侧、独立命中区域，不与正文操作混排。 */
body.wxt-v2 .modal-secondary-dialog > :is(.modal-header, .modal-head, .kb-modal-header, .db-modal-header, .qa-modal-header, .agent-chat-modal__header, .pp-modal-header, .pp-editor-toolbar),
body.compare-fresh .modal-secondary-dialog > :is(.modal-header, .modal-head, .kb-modal-header, .db-modal-header, .qa-modal-header, .agent-chat-modal__header, .pp-modal-header, .pp-editor-toolbar) {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.wxt-v2 .modal-secondary-dialog > .modal-header,
body.compare-fresh .modal-secondary-dialog > .modal-header {
  min-height: 50px;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--modal-secondary-ink) !important;
}

body.wxt-v2 .modal-secondary-dialog > .modal-footer,
body.compare-fresh .modal-secondary-dialog > .modal-footer {
  padding: 10px 16px !important;
  border-top: 1px solid var(--modal-secondary-line) !important;
}

body.wxt-v2 .modal-secondary-dialog .modal-header__text,
body.compare-fresh .modal-secondary-dialog .modal-header__text,
body.wxt-v2 .modal-secondary-dialog > .modal-header h2,
body.compare-fresh .modal-secondary-dialog > .modal-header h2,
body.wxt-v2 .modal-secondary-dialog > .modal-header h3,
body.compare-fresh .modal-secondary-dialog > .modal-header h3 {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  color: var(--modal-secondary-ink) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.wxt-v2 .modal-secondary-dialog > .modal-body,
body.compare-fresh .modal-secondary-dialog > .modal-body {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: var(--modal-secondary-card) !important;
  animation: none !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.modal-close, .dialog-close, .dialog-close-btn, .kb-modal-close, .db-modal-close, .qa-modal-close, .pp-modal-close, .import-modal-close, .sdc-dialog-close, .concrete-modal-close, .export-modal-close, .attach-preview-close, .compare-snapshot-modal-close, .m-sheet-close, .m-progress-close, .close-btn, [data-modal-close]),
body.compare-fresh .modal-secondary-dialog :is(.modal-close, .dialog-close, .dialog-close-btn, .kb-modal-close, .db-modal-close, .qa-modal-close, .pp-modal-close, .import-modal-close, .sdc-dialog-close, .concrete-modal-close, .export-modal-close, .attach-preview-close, .compare-snapshot-modal-close, .m-sheet-close, .m-progress-close, .close-btn, [data-modal-close]) {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 auto;
  margin-inline-start: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--modal-secondary-line-strong) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--modal-secondary-muted) !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}

body.wxt-v2 .modal-secondary-dialog :is(.modal-close, .dialog-close, .dialog-close-btn, .kb-modal-close, .db-modal-close, .qa-modal-close, .pp-modal-close, .import-modal-close, .sdc-dialog-close, .concrete-modal-close, .export-modal-close, .attach-preview-close, .compare-snapshot-modal-close, .m-sheet-close, .m-progress-close, .close-btn, [data-modal-close]):hover,
body.compare-fresh .modal-secondary-dialog :is(.modal-close, .dialog-close, .dialog-close-btn, .kb-modal-close, .db-modal-close, .qa-modal-close, .pp-modal-close, .import-modal-close, .sdc-dialog-close, .concrete-modal-close, .export-modal-close, .attach-preview-close, .compare-snapshot-modal-close, .m-sheet-close, .m-progress-close, .close-btn, [data-modal-close]):hover {
  border-color: var(--modal-secondary-accent) !important;
  background: var(--modal-secondary-accent-soft) !important;
  color: var(--modal-secondary-accent-dark) !important;
}

/* 自定义弹窗的表面也回到同一套中性/珊瑚语言。 */
body.wxt-v2 .modal-secondary-dialog:is(.unified-batch-fill__modal, .batch-fill-modal),
body.compare-fresh .modal-secondary-dialog:is(.unified-batch-fill__modal, .batch-fill-modal) {
  border-radius: 12px !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__header, .batch-fill-header),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__header, .batch-fill-header) {
  min-height: 50px;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--modal-secondary-ink);
  background: var(--modal-secondary-card) !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__title, .batch-fill-title),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__title, .batch-fill-title) {
  color: var(--modal-secondary-ink) !important;
  font-size: 16px !important;
  text-shadow: none !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__title-icon, .batch-fill-title-icon),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__title-icon, .batch-fill-title-icon) {
  width: 28px;
  height: 28px;
  border: 1px solid var(--modal-secondary-line);
  border-radius: 7px;
  background: var(--modal-secondary-accent-soft) !important;
  color: var(--modal-secondary-accent-dark);
  font-size: 16px;
  text-shadow: none;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__body, .batch-fill-body),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__body, .batch-fill-body) {
  min-height: 0;
  overflow: auto !important;
  background: var(--modal-secondary-card) !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__footer, .batch-fill-footer),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__footer, .batch-fill-footer) {
  padding: 10px 16px !important;
  border-top: 1px solid var(--modal-secondary-line) !important;
  background: var(--modal-secondary-card) !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__btn--primary, .batch-fill-btn-confirm),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__btn--primary, .batch-fill-btn-confirm) {
  border: 1px solid var(--modal-secondary-accent-dark) !important;
  background: var(--modal-secondary-accent) !important;
  box-shadow: none !important;
}

body.wxt-v2 .modal-secondary-dialog :is(.unified-batch-fill__btn--secondary, .batch-fill-btn-cancel),
body.compare-fresh .modal-secondary-dialog :is(.unified-batch-fill__btn--secondary, .batch-fill-btn-cancel) {
  border: 1px solid var(--modal-secondary-line-strong) !important;
  background: var(--modal-secondary-card) !important;
  color: var(--modal-secondary-text) !important;
}

/* 嵌套批量确认框：仍在同一栈顶内，但必须有独立遮罩和清晰焦点。 */
body.wxt-v2 .unified-batch-fill__confirm-dialog,
body.compare-fresh .unified-batch-fill__confirm-dialog {
  background: rgba(23, 26, 24, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.wxt-v2 .unified-batch-fill__confirm-content,
body.compare-fresh .unified-batch-fill__confirm-content {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border: 1px solid var(--modal-secondary-line-strong) !important;
  border-radius: 12px !important;
  background: var(--modal-secondary-card) !important;
  box-shadow: var(--modal-secondary-shadow) !important;
}

/* 控件只统一形态，不覆盖图表/表格自身的颜色语义。 */
body.wxt-v2 .modal-secondary-dialog :is(input, select, textarea),
body.compare-fresh .modal-secondary-dialog :is(input, select, textarea) {
  border-color: var(--modal-secondary-line-strong) !important;
  border-radius: 6px !important;
  background: var(--modal-secondary-card) !important;
  color: var(--modal-secondary-text) !important;
}

body.wxt-v2 .modal-secondary-dialog :is(input, select, textarea):focus,
body.compare-fresh .modal-secondary-dialog :is(input, select, textarea):focus {
  border-color: var(--modal-secondary-accent) !important;
  box-shadow: 0 0 0 2px var(--modal-secondary-accent-soft) !important;
  outline: none;
}

body.wxt-v2 .modal-secondary-dialog :is(button, a):focus-visible,
body.compare-fresh .modal-secondary-dialog :is(button, a):focus-visible {
  outline: 2px solid var(--modal-secondary-accent) !important;
  outline-offset: 2px;
}

/* 自定义快照面板沿用同一表面，避免独立紫色/灰色语言漂移。 */
body.wxt-v2 .modal-secondary-dialog.compare-snapshot-modal,
body.compare-fresh .modal-secondary-dialog.compare-snapshot-modal {
  border-radius: 12px !important;
}

body.wxt-v2 .compare-snapshot-modal-header,
body.compare-fresh .compare-snapshot-modal-header {
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--modal-secondary-ink) !important;
  background: var(--modal-secondary-card) !important;
}

body.wxt-v2 .compare-snapshot-modal-header h3,
body.compare-fresh .compare-snapshot-modal-header h3 {
  color: var(--modal-secondary-ink) !important;
}

body.wxt-v2 .compare-snapshot-modal-option:hover,
body.compare-fresh .compare-snapshot-modal-option:hover {
  background: var(--modal-secondary-accent-soft) !important;
}

body.wxt-v2 .compare-snapshot-modal-option.selected,
body.compare-fresh .compare-snapshot-modal-option.selected {
  background: #ffe1d7 !important;
}

@media screen and (max-width: 768px) {
  body.wxt-v2 .modal-secondary-overlay,
  body.compare-fresh .modal-secondary-overlay {
    align-items: flex-start;
    padding: 12px;
  }

  body.wxt-v2 .modal-secondary-dialog,
  body.compare-fresh .modal-secondary-dialog {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 10px !important;
  }

  body.wxt-v2 .modal-secondary-dialog > .modal-header,
  body.compare-fresh .modal-secondary-dialog > .modal-header {
    padding: 10px 12px !important;
  }

  body.wxt-v2 .modal-secondary-dialog > .modal-footer,
  body.compare-fresh .modal-secondary-dialog > .modal-footer {
    flex-wrap: wrap;
    padding: 9px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wxt-v2 .modal-secondary-overlay,
  body.compare-fresh .modal-secondary-overlay,
  body.wxt-v2 .modal-secondary-dialog,
  body.compare-fresh .modal-secondary-dialog {
    animation: none !important;
    transition: none !important;
  }
}