/* =============================================================
   图片上传组件样式（设计系统对齐版）
   依赖: 源力 (Yuanli) 设计令牌 --color-* / --sp-* / --radius-*
   ============================================================= */

/* --- 全屏透明 lightbox 预览（与 sms .lightbox-mask 逐字一致） ---
   说明：预览交互由 image_upload.js 的 window.showLightbox 渲染，
   该函数在运行时也会注入同名 CSS 作为兜底；此处为规范来源。 */
.lightbox-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .92);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.lightbox-toolbar {
  position: fixed;
  top: 16px;
  right: 20px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.lightbox-toolbar button {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.lightbox-toolbar button:hover {
  background: rgba(255, 255, 255, .25);
}

.lightbox-toolbar button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.lightbox-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  min-height: 50vh;
  max-height: 80vh;
}

.lightbox-body img {
  max-width: 90vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: grab;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.lightbox-body img.dragging {
  cursor: grabbing;
  transition: none;
}

/* --- 上传区域外层容器 --- */
.image-upload-area {
  margin-top: 0;
}

.image-upload-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 12px);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* --- 上传 / 预览方框（统一基础） --- */
.image-upload-box {
  width: 130px;
  height: 140px;
  border: 1.5px dashed var(--color-border-strong, #c9cdd4);
  border-radius: var(--radius-2, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--t-base, 220ms cubic-bezier(.4, 0, .2, 1));
  background: var(--color-bg-2, #fcfdfe);
  overflow: hidden;
  flex-shrink: 0;
}

/* ---- 上传触发按钮（虚线 + 号） ---- */
.image-upload-box.upload-btn {
  border-style: dashed;
  flex-direction: column;
  gap: var(--sp-1, 4px);
  background: var(--color-bg-2, #fcfdfe);
}

.image-upload-box.upload-btn .upload-icon {
  font-size: 32px;
  color: var(--color-text-3, #86909c);
  line-height: 1;
  transition: all var(--t-base, 220ms cubic-bezier(.4, 0, .2, 1));
}

.image-upload-box.upload-btn .upload-hint {
  font-size: var(--font-size-caption, 10px);
  color: var(--color-text-3, #86909c);
  font-weight: 500;
  transition: all var(--t-base, 220ms cubic-bezier(.4, 0, .2, 1));
  white-space: nowrap;
}

.image-upload-box.upload-btn:hover {
  border-color: var(--color-primary, #1664ff);
  background: var(--color-primary-soft, #ecf3ff);
}

.image-upload-box.upload-btn:hover .upload-icon {
  color: var(--color-primary, #1664ff);
  transform: scale(1.08);
}

.image-upload-box.upload-btn:hover .upload-hint {
  color: var(--color-primary, #1664ff);
}

/* ---- 已上传图片预览框 ---- */
.image-upload-box:not(.upload-btn) {
  border-style: solid;
  border-color: var(--color-border, #e5e6eb);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,.04));
}

.image-upload-box:not(.upload-btn):hover {
  box-shadow: var(--shadow-md, 0 4px 10px rgba(0,0,0,.08));
  border-color: var(--color-primary, #1664ff);
}

.image-upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius-2, 8px) - 1px);
  position: absolute;
  top: 0;
  left: 0;
}

/* ---- 查看按钮（整框悬浮半透明遮罩 + 居中眼睛图标，与源力 .photo-view-btn / cust/courses.php 完全一致） ---- */
.image-upload-box .view-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 13, 14, 0.35);
  color: var(--color-white);
  border: none;
  opacity: 0;
  cursor: pointer;
  transition: opacity 150ms ease;
  z-index: 10;
}

.image-upload-box:hover .view-btn {
  opacity: 1;
}

/* ---- 审核状态角标（左上角，覆盖在缩略图上；仅当传入 reviewStatus 时渲染，不干扰其它页面） ---- */
.image-upload-box .doc-review-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 11;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 6px;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  white-space: nowrap;
}
.image-upload-box .doc-review-badge--pending { background: var(--color-warning, #d48806); }
.image-upload-box .doc-review-badge--rejected { background: var(--color-danger, #d7312a); }
.image-upload-box .doc-review-badge--approved { background: var(--color-success, #00b42a); }

/* ---- 删除按钮（右上角红色圆钮，置于框内避免被 overflow:hidden / 容器边缘裁切） ---- */
.image-upload-box .delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--color-danger, #d7312a);
  color: white;
  border: 2px solid var(--color-bg-1, #fff);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--t-fast, 140ms cubic-bezier(.4, 0, .2, 1));
  z-index: 11;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.image-upload-box .delete-btn:hover {
  background: var(--color-danger-hover, #ee3f38);
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(215, 49, 42, .35);
}

/* ---- 隐藏的 file input ---- */
.image-upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---- 小尺寸上传框（紧凑表格单元格用，如财务报账单发票列） ---- */
.image-upload-box.image-upload-box--sm {
  width: 30px;
  height: 30px;
  border-width: 1px;
  border-radius: 4px;
}

.image-upload-box.image-upload-box--sm.upload-btn .upload-icon {
  font-size: 18px;
  line-height: 1;
}

.image-upload-box.image-upload-box--sm.upload-btn .upload-hint {
  display: none;
}

/* 小尺寸下隐藏悬浮查看按钮，整框点击即放大（避免与删除钮在小框内重叠误触） */
.image-upload-box.image-upload-box--sm .view-btn {
  display: none;
}

.image-upload-box.image-upload-box--sm .delete-btn {
  width: 16px;
  height: 16px;
  font-size: 9px;
  line-height: 1;
  top: 1px;
  right: 1px;
  border-width: 1px;
}

/* =============================================================
   图片预览模态框
   ============================================================= */
.image-preview-modal {
  z-index: 1060 !important;
}

.image-preview-modal .modal-content {
  background: #fff;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.image-preview-modal .modal-header {
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
  padding: 10px 15px;
  position: relative;
  z-index: 10;
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 50px;
  pointer-events: auto;
}

.image-preview-modal .modal-body {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.9);
  min-height: 50vh;
  max-height: 80vh;
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 0 0 8px 8px;
  position: relative;
}

.image-preview-modal .modal-body img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
  display: block;
  cursor: grab;
  will-change: transform;
}

.image-preview-modal .modal-body img.dragging {
  transition: none;
  cursor: grabbing;
}

.image-preview-modal .modal-body.dragging,
.image-preview-modal .modal-body.dragging img {
  cursor: grabbing;
}

.image-preview-modal .modal-header .btn-group {
  gap: 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  /* 根因：源力设计系统 .yl-app .btn-group 会给容器蓝色背景+阴影（分段式主按钮样式），
     但预览模态框工具栏是独立图标按钮组，必须透明背景，否则按钮即使自身透明也会透出整片蓝色。
     !important 确保稳赢 .yl-app .btn-group 及其变体。 */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 操作按钮 - 简洁现代风格，基于 Bootstrap btn-outline-secondary。
   显式给出白色背景/灰色边框/深色图标，避免被 .yl-app .btn-outline-secondary
   或 Bootstrap 默认样式覆盖为透明或蓝色。 */
.image-preview-modal .modal-header .btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  transition: all 0.2s ease;
  background-color: #ffffff !important;
  border: 1px solid var(--color-border-3, #c9cdd4) !important;
  color: var(--color-text-1, #1d2129) !important;
}

.image-preview-modal .modal-header .btn:hover {
  transform: translateY(-1px);
  background-color: var(--grey-1, #f7f8fa) !important;
}

.image-preview-modal .modal-header .btn i {
  font-size: 1rem;
  line-height: 1;
}

.image-preview-modal .modal-body img.rotated {
  transform-origin: center center;
}

/* =============================================================
   响应式适配
   ============================================================= */

@media (max-width: 992px) {
  .image-upload-box {
    width: 115px;
    height: 125px;
  }
}

@media (max-width: 768px) {
  .image-upload-container {
    gap: var(--sp-2, 8px);
    justify-content: center;
  }

  .image-upload-box {
    width: 100px;
    height: 110px;
  }

  .image-upload-box.upload-btn .upload-icon {
    font-size: 26px;
  }

  .image-upload-box.upload-btn .upload-hint {
    display: none;
  }

  .image-preview-modal .modal-dialog {
    margin: 10px auto;
    max-width: calc(100% - 20px);
  }

  .image-preview-modal .modal-body {
    min-height: 50vh;
  }

  .image-preview-modal .modal-body img {
    max-height: 60vh;
  }

  .image-preview-modal .modal-header {
    padding: 10px 15px;
    min-height: 50px;
  }

  .image-preview-modal .modal-header .btn-group {
    gap: 6px;
  }

  .image-preview-modal .modal-header .btn {
    width: 32px;
    height: 32px;
  }

  .image-preview-modal .modal-header .btn i {
    font-size: 0.875rem;
  }
}

@media (max-width: 576px) {
  .image-upload-box {
    width: 90px;
    height: 98px;
  }

  .image-upload-box.upload-btn .upload-icon {
    font-size: 22px;
  }

  .image-upload-box .delete-btn {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: 4px;
    right: 4px;
  }

  .image-preview-modal .modal-dialog {
    margin: 5px auto;
    max-width: calc(100% - 10px);
  }

  .image-preview-modal .modal-body {
    padding: 10px;
    min-height: 40vh;
  }

  .image-preview-modal .modal-body img {
    max-height: 50vh;
  }

  .image-preview-modal .modal-header {
    padding: 8px 12px;
    min-height: 44px;
  }

  .image-preview-modal .modal-header .btn-group {
    gap: 4px;
  }

  .image-preview-modal .modal-header .btn {
    width: 28px;
    height: 28px;
  }

  .image-preview-modal .modal-header .btn i {
    font-size: 0.8125rem;
  }
}