/* Upload zone — the documents dropzone (tenant/documents/extractable_documents/_upload_zone.html.erb,
   file_upload_controller). Moved out of theme.css (FE-2) and reshaped for
   US-224: the area is a drop target only, the two buttons below it open
   the file dialog and the folder dialog (a browser dialog offers one or
   the other, never both). */

.upload-form {
  margin-bottom: 1rem;
}

.upload-dropzone {
  --upload-border-color: var(--gxp-slate-300);
  --upload-bg: var(--gxp-slate-50);
  --upload-icon-color: var(--gxp-slate-400);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--upload-border-color);
  border-radius: var(--tblr-border-radius);
  background-color: var(--upload-bg);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Compact (the list already holds documents): one wrapping row. */
.upload-dropzone--compact {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
  border-width: 1px;
  font-size: 0.8125rem;
}

.upload-dropzone--compact .upload-label {
  font-size: 0.8125rem;
}

.upload-dropzone--dragover {
  --upload-border-color: var(--traqx-blue-500);
  --upload-bg: var(--traqx-blue-50);
  --upload-icon-color: var(--traqx-blue-500);
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15);
}

.upload-dropzone--uploading {
  pointer-events: none;
  opacity: 0.6;
}

.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.upload-icon {
  color: var(--upload-icon-color);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.upload-label {
  font-size: 0.875rem;
  color: var(--gxp-slate-600);
}

/* The two equal ways in: "Choose files" and "Choose folder". */
.upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.upload-action {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Skipped and not-uploaded file names: full width, wraps, stays readable
   while the zone is dimmed for an upload. */
.upload-note {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--gxp-slate-600);
  text-align: center;
  overflow-wrap: anywhere;
}

/* The upload's own alert, rendered by the index inside the documents frame. */
.upload-alert {
  margin-bottom: 0.75rem;
}