/**
 * upload.css
 * ---------------------------------------------------------------------------
 * Visual states of the upload dropzone. Depends on the custom properties
 * defined in imganva-tools.css (must load first). Structure and class
 * names here match templates/upload-zone.js exactly — see that file for
 * the DOM it builds — and the state-toggling classes match upload.js's
 * drag/drop event handlers.
 *
 * FOUR VISUAL STATES:
 *
 *   IDLE        — .imganva-dropzone (base). Dashed border signals "drop
 *                 something here" without implying anything is loaded yet.
 *
 *   HOVER       — plain :hover, mouse resting over the zone before any
 *                 drag or click. Subtle — a hint, not a commitment.
 *
 *   DRAG-ACTIVE — .imganva-dropzone-active, toggled by upload.js's
 *                 dragenter/dragleave counter while a drag is over the
 *                 zone. Solid cyan border + tinted background + a small
 *                 lift, giving clear "yes, drop it here" feedback.
 *
 *   POPULATED   — .imganva-dropzone-populated, set once upload.js hands
 *                 back at least one accepted file. Border switches from
 *                 dashed to solid purple — visually distinct from both
 *                 idle (dashed, neutral) and drag-active (solid, cyan) —
 *                 so a returning user can tell "a file is loaded" apart
 *                 from "a file is currently being dragged over this" at
 *                 a glance.
 *
 * The original plugin had no drag-and-drop at all, so none of these
 * states existed anywhere in the previous CSS — this file is entirely
 * new surface area, not a refactor.
 * ---------------------------------------------------------------------------
 */

/** =========================================================================
 *  BASE / IDLE STATE
 *  ========================================================================= */
.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 file input ----
 *  aria-hidden + tabindex="-1" in the markup already remove it from the
 *  accessibility tree and tab order — the visible, keyboard-operable
 *  target is the .imganva-dropzone wrapper itself (role="button",
 *  tabindex="0", Space/Enter wired in upload-zone.js). display: none is
 *  safe here specifically because nothing ever needs to focus this
 *  element directly; it's only ever driven programmatically via
 *  fileInput.click() from the wrapper's click/keydown handlers. */
.imganva-dropzone-input {
  display: none;
}

/** ---- File count badge (batch mode only) ---- */
.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 STATE
 *  Toggled by upload.js while a drag is over the zone (dragenter/
 *  dragleave depth counter — see upload.js header for why a naive
 *  enter/leave toggle isn't used directly).
 *  ========================================================================= */
.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 STATE
 *  At least one file has been accepted. Solid purple border distinguishes
 *  "loaded" from both the dashed idle state and the cyan drag-active
 *  state at a glance.
 *  ========================================================================= */
.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 takes visual priority over populated when both classes
 *  are present at once (re-dragging a new file onto an already-loaded
 *  zone) — cyan drag feedback should never be muted by the purple
 *  populated tint sitting underneath it. */
.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);
}

/** =========================================================================
 *  RESPONSIVE
 *  ========================================================================= */
@media (max-width: 640px) {
  .imganva-dropzone {
    padding: var(--imganva-space-5) var(--imganva-space-4);
  }

  .imganva-dropzone-icon {
    width: 32px;
    height: 32px;
  }
}