/* 通用上传区 —— 全站统一的文件选择控件（2026-07-28）。
   在此之前：报价单和拓扑图用的是浏览器裸 input[type=file]（「选择文件／未选择文件」），
   方案助手是漂亮的拖拽区，合同助手是普通按钮 —— 同一个动作三种长相，
   而裸 input 恰好在最高频的报价单页上。

   用法：给 <input type="file"> 加 data-dropzone 属性即可，dropzone.js 自动升级；
   文案用 data-dz-label / data-dz-hint 覆盖。原 input 仍是唯一数据源，
   表单原生提交（拓扑图）和 JS 取 files（报价单）都照旧工作。 */

.dz {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  min-height: 104px; padding: 16px 14px;
  border: 1px dashed var(--border-medium, #c9ccd1);
  border-radius: 12px;
  background: var(--bg-primary, #fff);
  text-align: center; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.dz:hover,
.dz:focus-visible,
.dz.dragging {
  border-color: var(--color-blue, #0071e3);
  background: var(--bg-secondary, #f6f8fb);
  outline: none;
}
/* 原 input 铺成透明覆盖层，而不是 display:none —— 隐藏掉的 required 字段会让
   Chrome 在提交时报「An invalid form control with name='excel' is not focusable」
   并静默拒绝提交（拓扑图那个原生 form 正好是 required）。铺成覆盖层还顺带白拿了
   原生的点击开文件框、键盘可聚焦、以及浏览器自带的必填提示定位。 */
.dz > input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
/* 选了文件之后让出点击权，否则盖住「换一个」按钮 */
.dz.has-file > input[type="file"] { pointer-events: none; }

.dz-icon { font-size: 22px; line-height: 1; }
.dz-label { font-size: 13px; font-weight: 650; color: var(--text-primary, #1d1d1f); }
.dz-hint { font-size: 11.5px; color: var(--text-tertiary, #8a8e94); }

/* 选中文件后：替换掉提示文案，给出文件名 + 大小 + 换一个 */
.dz.has-file { border-style: solid; border-color: var(--color-green, #34a853); }
.dz-file { position: relative; z-index: 1; display: none; align-items: center; gap: 8px; font-size: 12.5px; }
.dz.has-file .dz-file { display: flex; }
.dz.has-file .dz-icon,
.dz.has-file .dz-label,
.dz.has-file .dz-hint { display: none; }
.dz-file-name { font-weight: 650; color: var(--text-primary, #1d1d1f); word-break: break-all; }
.dz-file-size { color: var(--text-tertiary, #8a8e94); }
.dz-file-clear {
  padding: 2px 8px; border: 1px solid var(--border-light, #e3e5e8); border-radius: 999px;
  background: transparent; color: var(--text-secondary, #5e6268);
  font-size: 11.5px; cursor: pointer;
}
.dz-file-clear:hover { border-color: var(--color-red, #d6455b); color: var(--color-red, #d6455b); }

@media (max-width: 760px) {
  .dz { min-height: 88px; padding: 13px 12px; }
}