/* assets/css/styles.css */

:root {
  --cedar-green: #2E7D32;
  --hover-blue: #2563eb;
  --text-primary: #374151;
}

/* =========================================
   通用上传区域样式 (Compress/Merge 风格)
   ========================================= */

/* 核心：蓝色外发光阴影 + 白色内边距模拟 */
.upload-zone {
  /* 5px 白色内圈 + 15px 蓝色半透明外圈 */
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 15px rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hover 状态：仅边框变蓝，背景不变 (符合你的要求) */
.upload-zone:hover {
  border-color: #3b82f6 !important;
}

/* Dragover 状态 (JS 动态添加 .drag-over 类)：边框变蓝 + 背景变浅蓝 */
.upload-zone.drag-over {
  border-color: #3b82f6 !important;
  background-color: #eff6ff !important;
  /* 拖拽时稍微加深一点阴影，增强反馈 */
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 15px rgba(59, 130, 246, 0.25);
}

/* 内部按钮样式 (统一风格) */
.upload-select-btn {
  display: inline-block;
  background-color: #2563eb; /* blue-600 */
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 0.75rem; /* rounded-xl */
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s;
}
.upload-select-btn:hover {
  background-color: #1d4ed8; /* blue-700 */
}

/* 错误提示通用样式 */
.upload-error-msg {
  margin-top: 1rem;
  color: #dc2626; /* red-600 */
  font-size: 0.875rem;
  font-weight: 600;
  background-color: #fef2f2; /* red-50 */
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  display: inline-block;
}