/**
 * FreddyForms Pro — Dropzone-Optik fuer das file_upload-Feld.
 *
 * Nutzt die Free-Theming-Variablen (--ffd-*), damit sich das Feld nahtlos ins
 * Formular-Design einfuegt. Icons als inline-SVG data-URI (keine externen Assets).
 */

.ff-fileupload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Natives Datei-Input visuell versteckt (per Dropzone/Klick ausgeloest). */
.ff-fileupload__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.ff-fileupload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  border: 2px dashed var(--ffd-border, #cbd5e1);
  border-radius: var(--ffd-radius, 8px);
  background: #f8fafc;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ff-fileupload__zone:hover,
.ff-fileupload__zone:focus-visible {
  outline: none;
  border-color: var(--ffd-primary, #2f5fe0);
  background: #fff;
}
.ff-fileupload__zone.is-dragover {
  border-color: var(--ffd-primary, #2f5fe0);
  background: color-mix(in srgb, var(--ffd-primary, #2f5fe0) 8%, #fff);
}

.ff-fileupload__icon {
  width: 34px;
  height: 34px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
}

.ff-fileupload__prompt {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}
.ff-fileupload__prompt b {
  color: var(--ffd-primary, #2f5fe0);
  font-weight: 700;
}
.ff-fileupload__hint {
  font-size: 12px;
  color: #94a3b8;
}

/* Gewaehlte/hochgeladene Datei als Karte. */
.ff-fileupload__file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ffd-border, #e2e8f0);
  border-radius: var(--ffd-radius, 8px);
  background: #fff;
}
.ff-fileupload__fileicon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5fe0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E");
}
.ff-fileupload__meta {
  flex: 1 1 auto;
  min-width: 0;
}
.ff-fileupload__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ff-fileupload__size {
  font-size: 12px;
  color: #94a3b8;
}
.ff-fileupload__remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.ff-fileupload__remove:hover {
  background: #fee2e2;
  color: #b91c1c;
}

.ff-fileupload__status {
  font-size: 13px;
  color: #475569;
}
.ff-fileupload__status.is-error {
  color: #b91c1c;
}

/* Waehrend des Uploads: Dropzone gedimmt/gesperrt. */
.ff-fileupload--busy .ff-fileupload__zone {
  opacity: 0.6;
  pointer-events: none;
}