/* ============================================
 * musi-art upload.css (v3.2.12)
 * 上传 / 拖拽 / 进度 视觉规范
 * 全部继承 P0 设计 Token，无硬编码颜色
 * 依赖：style.css (Token 体系)
 * ============================================ */

/* ============================================
 * 1. .upload-box — 通用上传盒（大块拖入区）
 * ============================================ */
.upload-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: var(--space-6) var(--space-4);
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.upload-box:hover {
  background: var(--color-card-hover);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.upload-box:active {
  transform: scale(.99);
}

.upload-box:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* 拖入高亮（dz.js 加 .dz-drag） */
.upload-box.dz-drag,
.upload-box.drag-over {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary);
  transform: scale(1.01);
}

/* 拖入成功高亮 */
.upload-box.dz-ok {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* 拖入错误高亮 */
.upload-box.dz-bad {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  color: var(--color-danger);
  animation: dz-shake .25s 1;
}

@keyframes dz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 大尺寸变体 */
.upload-box.upload-box-lg {
  min-height: 220px;
  padding: var(--space-8) var(--space-6);
  font-size: var(--text-md);
}

/* 紧凑尺寸变体（用于内嵌表单） */
.upload-box.upload-box-sm {
  min-height: 100px;
  padding: var(--space-4);
  font-size: var(--text-sm);
}

/* 图标 + 文案布局 */
.upload-box .ub-icon {
  font-size: 36px;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  line-height: 1;
}

.upload-box .ub-icon::before {
  content: "📁";
}

.upload-box.upload-image .ub-icon::before {
  content: "🖼️";
}

.upload-box.upload-audio .ub-icon::before {
  content: "🎵";
}

.upload-box.upload-zip .ub-icon::before {
  content: "📦";
}

.upload-box.upload-sql .ub-icon::before {
  content: "🛢️";
}

.upload-box .ub-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.upload-box .ub-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.upload-box .ub-hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: var(--space-2);
}

/* ============================================
 * 2. 内联上传按钮 + 隐藏 input（点击触发）
 * ============================================ */
.upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-4);
  background: var(--color-card);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.upload-trigger:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.upload-trigger:active {
  transform: scale(.98);
}

/* 主操作按钮变体 */
.upload-trigger.upload-trigger-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.upload-trigger.upload-trigger-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

/* 拖入态（包裹隐藏 input 的容器） */
.upload-trigger-wrap {
  display: inline-block;
  position: relative;
}

.upload-trigger-wrap.dz-drag {
  outline: 3px dashed var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ============================================
 * 3. 进度条 — 上传中反馈
 * ============================================ */
.upload-progress {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.upload-progress.is-active {
  display: block;
}

.upload-progress .up-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}

.upload-progress .up-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary) 0%, #a78bfa 100%);
  border-radius: var(--radius-full);
  transition: width .3s ease;
}

.upload-progress .up-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.upload-progress .up-pct {
  color: var(--color-primary);
  font-weight: 700;
}

/* ============================================
 * 4. 已选文件预览（缩略图）
 * ============================================ */
.upload-preview {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-2);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.upload-preview.is-active {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.upload-preview img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}

.upload-preview .up-meta-mini {
  flex: 1;
  min-width: 0;
}

.upload-preview .up-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview .up-size {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin-top: 2px;
}

.upload-preview .up-remove {
  width: var(--touch-min);
  height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-md);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.upload-preview .up-remove:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ============================================
 * 5. 多文件 ref-row（P1 优化）
 * ============================================ */
.ref-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ref-row input[type="file"] {
  flex: 1;
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.ref-row input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
}

.ref-row input[type="file"]::file-selector-button {
  display: none;
}

.ref-row .ref-del {
  flex-shrink: 0;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.ref-row .ref-del:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* ref-row 拖拽态 */
.ref-row.dz-drag,
.ref-row.drag-over {
  background: var(--color-primary-light);
  border-radius: var(--radius);
}

/* ============================================
 * 6. 提示浮层（拖入时显示）
 * ============================================ */
.dz-toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  pointer-events: none;
  z-index: 999;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
}

/* ============================================
 * 7. 暗色主题适配（继承 light 主题的所有选择器）
 * ============================================ */
:root[data-theme="dark"] .upload-box {
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .upload-box:hover {
  background: var(--color-card-hover);
  border-color: var(--color-primary);
  color: var(--color-text);
}

:root[data-theme="dark"] .upload-box.dz-drag,
:root[data-theme="dark"] .upload-box.drag-over {
  background: rgba(124, 58, 237, .2);
  border-color: var(--color-primary);
  color: var(--color-text);
}

:root[data-theme="dark"] .upload-trigger {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-theme="dark"] .upload-trigger:hover {
  background: var(--color-card-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

:root[data-theme="dark"] .upload-preview {
  background: var(--color-card);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .upload-progress {
  background: var(--color-bg-alt);
}

:root[data-theme="dark"] .ref-row input[type="file"] {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-theme="dark"] .ref-row .ref-del {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ============================================
 * 8. 移动端 — 触摸目标 ≥44px
 * ============================================ */
@media (max-width: 768px) {
  .upload-box {
    min-height: 140px;
    padding: var(--space-5) var(--space-3);
  }

  .upload-box .ub-icon {
    font-size: 32px;
  }

  .upload-trigger {
    min-height: var(--touch-min);
    width: 100%;
  }

  .ref-row {
    flex-wrap: wrap;
  }

  .ref-row input[type="file"] {
    width: 100%;
    flex: 1 1 100%;
  }

  .ref-row .ref-del {
    margin-left: auto;
  }
}

/* ============================================
 * 9. 减少动画（用户偏好）
 * ============================================ */
@media (prefers-reduced-motion: reduce) {
  .upload-box,
  .upload-trigger,
  .ref-row .ref-del,
  .upload-progress .up-fill {
    transition: none;
  }

  .upload-box.dz-bad {
    animation: none;
  }
}