/* ==========================================================================
   Yn_tools - Shared Components
   Unified drag-and-drop upload zone
   ========================================================================== */

/* ── Dropzone ─────────────────────────────────────────────────────────────── */

/*
 * Usage:
 *   <div class="dropzone" id="dropZone">
 *     <svg class="dropzone-icon" ...>...</svg>
 *     <div class="dropzone-text">拖拽文件到此处，或点击选择</div>
 *     <div class="dropzone-hint">支持的格式说明</div>
 *     <input type="file" class="dropzone-input" ...>
 *   </div>
 *
 * Override defaults via CSS variables on the element or ancestor:
 *   --dz-accent:      highlight color        (default: #00E88A)
 *   --dz-border:      border color idle      (default: rgba(255,255,255,0.1))
 *   --dz-bg:          background idle        (default: rgba(255,255,255,0.02))
 *   --dz-text:        main text color        (default: rgba(255,255,255,0.5))
 *   --dz-hint:        hint text color        (default: rgba(255,255,255,0.3))
 *   --dz-radius:      border-radius          (default: 12px)
 *   --dz-padding:     padding                (default: 40px 20px)
 */

.dropzone {
  position: relative;
  border: 2px dashed var(--dz-border, rgba(255,255,255,0.1));
  border-radius: var(--dz-radius, 12px);
  padding: var(--dz-padding, 40px 20px);
  background: var(--dz-bg, rgba(255,255,255,0.02));
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.dropzone:hover {
  border-color: var(--dz-accent, #00E88A);
  background: color-mix(in srgb, var(--dz-accent, #00E88A) 3%, transparent);
}

.dropzone.dz-dragover {
  border-color: var(--dz-accent, #00E88A);
  background: color-mix(in srgb, var(--dz-accent, #00E88A) 6%, transparent);
}

/* Icon */
.dropzone-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--dz-text, rgba(255,255,255,0.5));
  display: block;
}

/* Main text */
.dropzone-text {
  font-size: 14px;
  color: var(--dz-text, rgba(255,255,255,0.5));
  margin-bottom: 4px;
}

/* Hint text */
.dropzone-hint {
  font-size: 12px;
  color: var(--dz-hint, rgba(255,255,255,0.3));
}

/* Hidden file input inside dropzone */
.dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ── Light theme override ──────────────────────────────────────────────────── */
/* Apply class="dropzone dropzone-light" for light backgrounds */

.dropzone-light {
  --dz-border: rgba(0,0,0,0.12);
  --dz-bg: #f8f9fa;
  --dz-text: rgba(0,0,0,0.5);
  --dz-hint: rgba(0,0,0,0.3);
}

.dropzone-light:hover,
.dropzone-light.dz-dragover {
  border-color: var(--dz-accent, #2563eb);
  background: color-mix(in srgb, var(--dz-accent, #2563eb) 5%, white);
}

/* ── Compact variant (for side panels) ─────────────────────────────────────── */

.dropzone-compact {
  --dz-padding: 20px 12px;
  --dz-radius: 8px;
}

.dropzone-compact .dropzone-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}

.dropzone-compact .dropzone-text {
  font-size: 12px;
}

.dropzone-compact .dropzone-hint {
  font-size: 10px;
}