/*
 * FM-13 File upload dropzone — app/components/ui/dropzone_component.rb
 *
 * Layers on top of the shared `.fm-control` shell owned by forms.css only
 * where noted; the zone itself is its own treatment (dashed border,
 * inset fill) rather than a `.fm-control`. Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 *
 * State is driven by a single root class swapped by dropzone_controller.js
 * (.is-drag-over / .is-file-selected / .is-uploading / .is-success /
 * .is-error). Every inner row is always in the DOM; only one is visible at
 * a time per the root state class, so the styleguide can force any state
 * by adding the class directly in the ERB — no extra CSS needed for that.
 */

:root {
  /* Component-local — not part of the shared token set. */
  --dropzone-min-h: 140px;
}

.ui-dropzone__zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dropzone-min-h);
  padding: var(--space-6);
  border: var(--border-dashed);
  border-radius: var(--radius-lg);
  background: var(--color-surface-inset);
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

/* The overlay input is scoped to the idle prompt (below), not the whole
 * `.ui-dropzone__zone` — the zone also hosts the file/uploading/success/
 * error rows, and their buttons (cancel/remove/try-again) are statically
 * positioned so a zone-wide absolute input would sit above them in the
 * hit-testing order and swallow their clicks, opening the OS file picker
 * instead of triggering the row action. Nesting the input inside
 * `.ui-dropzone__prompt` — the same element already display:none'd by the
 * root state classes when a row is showing — means the overlay is removed
 * from hit-testing whenever a row is visible, with no z-index juggling.
 */
.ui-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Prompt (idle) — also the <label> wrapping the file input; see the
   overlay-scoping comment above .ui-dropzone__input. */
.ui-dropzone__prompt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  text-align: center;
}

.ui-dropzone__prompt-icon {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-1);
}

.ui-dropzone__prompt-icon svg {
  display: block;
}

.ui-dropzone__text {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-dropzone__browse {
  color: var(--color-accent-pressed);
  font-weight: 500;
}

.ui-dropzone__hint {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

/* Rows — hidden unless the root state class says otherwise */
.ui-dropzone__file-row,
.ui-dropzone__uploading-row,
.ui-dropzone__success-row,
.ui-dropzone__error-row {
  display: none;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.ui-dropzone__file-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
  color: var(--color-ink-soft);
}

.ui-dropzone__preview {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.ui-dropzone--circle .ui-dropzone__preview {
  border-radius: var(--radius-round);
}

.ui-dropzone__file-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* End-truncation via CSS. True middle-truncation without JS is hard;
   a JS-based middle-truncate could replace this later if long filenames
   with meaningful suffixes (e.g. ".pdf") become a problem. */
.ui-dropzone__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-dropzone__filesize {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

/* Uploading — the row renders Ui::UploadProgressComponent (FB-07); its
   own styles live in upload_progress.css. */

/* Success */
.ui-dropzone__success-icon {
  display: inline-flex;
  color: var(--color-success);
}

.ui-dropzone__success-row .ui-dropzone__filename {
  color: var(--color-success-ink);
}

/* Error */
.ui-dropzone__error-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-danger-strong);
}

.ui-dropzone__error-message {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-danger-ink);
}

/* State visibility */
.ui-dropzone.is-drag-over .ui-dropzone__zone {
  background: var(--color-accent-100);
  border: var(--border-selected);
}

.ui-dropzone.is-file-selected .ui-dropzone__zone,
.ui-dropzone.is-uploading .ui-dropzone__zone,
.ui-dropzone.is-success .ui-dropzone__zone,
.ui-dropzone.is-error .ui-dropzone__zone {
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-border-glass);
}

.ui-dropzone.is-file-selected .ui-dropzone__prompt,
.ui-dropzone.is-uploading .ui-dropzone__prompt,
.ui-dropzone.is-success .ui-dropzone__prompt,
.ui-dropzone.is-error .ui-dropzone__prompt {
  display: none;
}

.ui-dropzone.is-file-selected .ui-dropzone__file-row {
  display: flex;
}

.ui-dropzone.is-uploading .ui-dropzone__uploading-row {
  display: flex;
}

.ui-dropzone.is-success .ui-dropzone__success-row {
  display: flex;
}

.ui-dropzone.is-error .ui-dropzone__zone {
  background: var(--color-danger-subtle);
}

.ui-dropzone.is-error .ui-dropzone__error-row {
  display: flex;
}

/* Image preview — the thumbnail replaces the generic file-icon frame.
   dropzone_controller.js only un-hides the <img> when image_preview is
   enabled and the selected file is actually an image; non-image files
   fall back to the frame even in an image_preview zone. */
.ui-dropzone--image-preview .ui-dropzone__file-frame {
  display: none;
}

.ui-dropzone__preview[hidden] {
  display: none;
}