/**
 * upload.css - Dropzone visual states. Class hooks match upload.js and
 * templates/upload-zone.js exactly.
 *   IDLE        .imganva-dropzone (dashed border)
 *   HOVER       :hover (subtle hint)
 *   DRAG-ACTIVE .imganva-dropzone-active (cyan, solid)
 *   POPULATED   .imganva-dropzone-populated (purple, solid)
 */
.imganva-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--imganva-space-2);
  padding: var(--imganva-space-7) var(--imganva-space-5);
  margin-bottom: var(--imganva-space-5);
  background: var(--imganva-surface);
  border: 2px dashed var(--imganva-border-strong);
  border-radius: var(--imganva-radius-lg);
  cursor: pointer;
  transition:
    border-color var(--imganva-transition-base),
    background var(--imganva-transition-base),
    transform var(--imganva-transition-fast);
}
.imganva-dropzone:hover {
  border-color: var(--imganva-purple);
  background: var(--imganva-surface-hover);
}
.imganva-dropzone:focus-visible {
  outline: none;
  border-color: var(--imganva-cyan);
  box-shadow: var(--imganva-focus-ring);
}

.imganva-dropzone-icon-wrap {
  color: var(--imganva-text-muted);
  transition: color var(--imganva-transition-base);
}
.imganva-dropzone:hover .imganva-dropzone-icon-wrap { color: var(--imganva-purple); }
.imganva-dropzone-icon { width: 40px; height: 40px; display: block; }

.imganva-dropzone-label {
  font-size: var(--imganva-text-base);
  font-weight: 600;
  color: var(--imganva-text);
  margin: 0;
}
.imganva-dropzone-sublabel {
  font-size: var(--imganva-text-sm);
  color: var(--imganva-text-muted);
  margin: 0;
}

/* Hidden native input — the wrapper is the keyboard/ARIA target */
.imganva-dropzone-input { display: none; }

/* Batch file-count badge */
.imganva-dropzone-badge {
  display: inline-flex;
  align-items: center;
  margin-top: var(--imganva-space-2);
  padding: var(--imganva-space-1) var(--imganva-space-3);
  background: var(--imganva-purple);
  color: #ffffff;
  font-family: var(--imganva-font-mono);
  font-size: var(--imganva-text-xs);
  font-weight: 600;
  border-radius: var(--imganva-radius-full);
}

/* Drag-active */
.imganva-dropzone-active {
  border-style: solid;
  border-color: var(--imganva-cyan);
  background: rgba(80, 254, 254, 0.08);
  transform: scale(1.01);
}
.imganva-dropzone-active .imganva-dropzone-icon-wrap { color: var(--imganva-cyan); }
.imganva-dropzone-active .imganva-dropzone-label { color: var(--imganva-cyan); }

/* Populated */
.imganva-dropzone-populated {
  border-style: solid;
  border-color: var(--imganva-purple);
  background: rgba(109, 40, 217, 0.08);
}
.imganva-dropzone-populated .imganva-dropzone-icon-wrap { color: var(--imganva-purple); }

/* Drag-active wins over populated (re-dragging onto a loaded zone) */
.imganva-dropzone-populated.imganva-dropzone-active {
  border-color: var(--imganva-cyan);
  background: rgba(80, 254, 254, 0.08);
}
.imganva-dropzone-populated.imganva-dropzone-active .imganva-dropzone-icon-wrap {
  color: var(--imganva-cyan);
}

@media (max-width: 640px) {
  .imganva-dropzone { padding: var(--imganva-space-5) var(--imganva-space-4); }
  .imganva-dropzone-icon { width: 32px; height: 32px; }
}