/* 防止 JS 初始化前闪现旧版「文本框 + 上传按钮」样式 */
@supports selector(:has(*)) {
  .input-group:has(.faupload[data-preview-id]),
  .input-group:has(.plupload[data-preview-id]),
  .form-inline:has(.faupload[data-preview-id]),
  .form-inline:has(.plupload[data-preview-id]) {
    visibility: hidden;
    min-height: 88px;
  }

  ul.plupload-preview,
  ul.faupload-preview {
    visibility: hidden;
  }

  .plupload[data-preview-id]:not(.fa-upload-trigger):not(.qf-file-upload-trigger):not(.qf-image-upload-trigger),
  .faupload[data-preview-id]:not(.fa-upload-trigger):not(.qf-file-upload-trigger):not(.qf-image-upload-trigger) {
    visibility: hidden;
  }

  .fa-upload-widget {
    visibility: visible;
  }

  .fa-upload-box > ul.plupload-preview.fa-upload-preview-ready,
  .fa-upload-box > ul.faupload-preview.fa-upload-preview-ready,
  .qf-file-upload-preview.fa-upload-preview-ready,
  .qf-image-upload-preview.fa-upload-preview-ready {
    visibility: visible;
  }

  /* JS 未加载时的兜底：2 秒后恢复旧 UI，避免永久不可见 */
  .input-group:has(.faupload[data-preview-id]),
  .input-group:has(.plupload[data-preview-id]),
  .form-inline:has(.faupload[data-preview-id]),
  .form-inline:has(.plupload[data-preview-id]),
  ul.plupload-preview,
  ul.faupload-preview,
  .plupload[data-preview-id]:not(.fa-upload-trigger):not(.qf-file-upload-trigger):not(.qf-image-upload-trigger),
  .faupload[data-preview-id]:not(.fa-upload-trigger):not(.qf-file-upload-trigger):not(.qf-image-upload-trigger) {
    animation: fa-upload-fouc-fallback 0s 2s forwards;
  }

  .fa-upload-widget,
  .fa-upload-widget * {
    animation: none;
  }
}

@keyframes fa-upload-fouc-fallback {
  to {
    visibility: visible;
  }
}

/* 支付页线下凭证上传：由 offlinePay 控制整组显隐，避免 FOUC 与 .hide 冲突 */
.fa-upload-widget.fa-pay-voucher.hide {
  display: none !important;
}
.fa-upload-widget.fa-pay-voucher:not(.hide) {
  visibility: visible !important;
}
.fa-upload-widget.fa-pay-voucher:not(.hide) .fa-upload-trigger,
.fa-upload-widget.fa-pay-voucher:not(.hide) ul.plupload-preview,
.fa-upload-widget.fa-pay-voucher:not(.hide) ul.faupload-preview {
  visibility: visible !important;
}

/* 统一上传组件样式（前后台通用） */
.fa-upload-widget {
  width: 100%;
  position: relative;
}
.fa-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.fa-upload-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.fa-upload-box > .fa-upload-trigger-wrap {
  align-self: flex-start;
}
.fa-upload-box .plupload-preview,
.fa-upload-box .faupload-preview {
  margin: 0;
}

/* + 号上传触发区域 */
.fa-upload-trigger,
.qf-file-upload-trigger,
.qf-image-upload-trigger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  padding: 8px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
  color: #666;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s, color 0.2s;
  position: relative;
  user-select: none;
  vertical-align: top;
  overflow: hidden;
  flex-shrink: 0;
}
button.fa-upload-trigger,
button.fa-upload-trigger.btn {
  appearance: none;
  -webkit-appearance: none;
  font-weight: normal;
  box-shadow: none;
  outline: none;
  background: #fafafa !important;
  border: 1px dashed #d9d9d9 !important;
  color: #666 !important;
}
.fa-upload-trigger .dz-message,
.qf-file-upload-trigger .dz-message,
.qf-image-upload-trigger .dz-message {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
}
.fa-upload-trigger:hover,
.fa-upload-trigger:focus,
.qf-file-upload-trigger:hover,
.qf-file-upload-trigger:focus,
.qf-image-upload-trigger:hover,
.qf-image-upload-trigger:focus {
  border-color: #1890ff;
  color: #1890ff;
  outline: none;
}
button.fa-upload-trigger:hover,
button.fa-upload-trigger:focus {
  border-color: #1890ff !important;
  color: #1890ff !important;
}
.fa-upload-plus,
.qf-file-upload-icon,
.qf-image-upload-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 2px;
  font-weight: 300;
  flex-shrink: 0;
}
.fa-upload-text {
  font-size: 12px;
  line-height: 1.3;
  flex-shrink: 0;
}
.fa-upload-trigger-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 108px;
  vertical-align: top;
  flex-shrink: 0;
}
.fa-upload-trigger-wrap > .fa-upload-trigger,
.fa-upload-trigger-wrap > .qf-file-upload-trigger,
.fa-upload-trigger-wrap > .qf-image-upload-trigger {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.fa-upload-hint {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.35;
  color: #999;
  text-align: center;
  overflow: hidden;
  max-height: 2.8em;
  word-break: break-all;
  box-sizing: border-box;
  visibility: visible;
  opacity: 1;
}

/* 预览列表 */
.plupload-preview,
.faupload-preview,
.qf-file-upload-preview,
.qf-image-upload-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
}
.fa-upload-box > .plupload-preview,
.fa-upload-box > .faupload-preview {
  margin: 0;
}
.plupload-preview > li,
.faupload-preview > li,
.qf-file-upload-preview > li,
.qf-image-upload-preview > li {
  margin: 0;
  padding: 0;
  width: 108px;
  float: none;
}
.plupload-preview > li.fa-upload-placeholder,
.faupload-preview > li.fa-upload-placeholder {
  min-height: 108px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  background: #fafafa;
  box-sizing: border-box;
}

/* 填满式预览卡片：缩略图 + 文件名 */
.fa-upload-card-fill {
  display: flex;
  flex-direction: column;
  width: 108px;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  color: #666;
  box-sizing: border-box;
  transition: border-color 0.2s, color 0.2s;
}
.fa-upload-card-fill:hover,
.fa-upload-card-fill:focus {
  border-color: #1890ff;
  color: #1890ff;
  outline: none;
}
.fa-upload-thumb {
  display: block;
  width: 108px;
  height: 88px;
  overflow: hidden;
  background: #fafafa;
  flex-shrink: 0;
}
.fa-upload-thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.fa-upload-card-fill.is-image .fa-upload-thumb img {
  object-fit: cover;
}
.fa-upload-card-fill.is-file .fa-upload-thumb img {
  object-fit: contain;
}
.fa-upload-thumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f8ff;
  color: #1890ff;
}
.fa-upload-thumb-icon .fa {
  font-size: 38px;
  line-height: 1;
}
.fa-upload-card-fill.is-file .fa-file-pdf-o {
  color: #f5222d;
}
.fa-upload-card-fill.is-file .fa-file-word-o {
  color: #1890ff;
}
.fa-upload-card-fill.is-file .fa-file-excel-o {
  color: #52c41a;
}
.fa-upload-card-fill.is-file .fa-file-powerpoint-o {
  color: #fa8c16;
}
.fa-upload-card-fill.is-file .fa-file-video-o {
  color: #722ed1;
}
.fa-upload-card-fill.is-file .fa-file-audio-o {
  color: #13c2c2;
}
.fa-upload-card-fill.is-file .fa-file-archive-o {
  color: #faad14;
}
.fa-upload-card-fill.is-file .fa-file-text-o,
.fa-upload-card-fill.is-file .fa-file-o {
  color: #8c8c8c;
}
.fa-upload-name {
  display: block;
  width: 100%;
  padding: 4px 6px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top: 1px solid #e8e8e8;
  background: #fff;
  box-sizing: border-box;
}
.plupload-preview .btn-trash,
.faupload-preview .btn-trash,
.qf-file-upload-preview .btn-trash,
.qf-image-upload-preview .btn-trash {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 2px 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #f5222d;
  background: transparent !important;
  border: none;
  box-shadow: none;
  cursor: pointer;
}
.plupload-preview .btn-trash i,
.faupload-preview .btn-trash i,
.qf-file-upload-preview .btn-trash i,
.qf-image-upload-preview .btn-trash i {
  display: none;
}
.plupload-preview .btn-trash::after,
.faupload-preview .btn-trash::after,
.qf-file-upload-preview .btn-trash::after,
.qf-image-upload-preview .btn-trash::after {
  content: '删除';
}

/* 兼容旧版 thumbnail 预览结构 */
.plupload-preview .thumbnail,
.faupload-preview .thumbnail {
  display: block;
  width: 108px;
  height: 88px;
  margin: 0;
  padding: 0;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}
.plupload-preview .thumbnail img,
.faupload-preview .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}