/*
 * dropzone.css — minimal-styling drop target.
 * Designed to inherit host-page color tokens via CSS variables with
 * sensible fallbacks so it looks reasonable on any portfolio surface.
 *
 * Host can override:
 *   --dz-accent       primary accent color (default: #2c4a3a)
 *   --dz-accent-error reject color (default: #8b2020)
 *   --dz-line         border color (default: rgba(0,0,0,0.18))
 *   --dz-bg           subtle background (default: rgba(0,0,0,0.02))
 *   --dz-ink-soft     muted text (default: #6a655d)
 */
.dz {
  --dz-accent: var(--accent, #2c4a3a);
  --dz-accent-error: var(--accent-alert, #8b2020);
  --dz-line: var(--line-strong, rgba(0,0,0,0.18));
  --dz-bg: rgba(0,0,0,0.02);
  --dz-ink-soft: var(--ink-soft, #6a655d);

  border: 2px dashed var(--dz-line);
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--dz-bg);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  position: relative;
}
.dz:hover:not(.is-success) { border-color: var(--dz-accent); background: rgba(44,74,58,0.04); }
.dz.is-hover {
  border-style: solid;
  border-color: var(--dz-accent);
  background: rgba(44,74,58,0.10);
  transform: scale(1.01);
}
.dz.is-active { opacity: 0.65; cursor: wait; }
.dz.is-success { border-style: solid; border-color: rgba(44,74,58,0.4); background: rgba(44,74,58,0.03); text-align: left; }
.dz.is-error { border-color: var(--dz-accent-error); background: rgba(139,32,32,0.04); }

.dz__idle { cursor: pointer; }
.dz__icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; opacity: 0.7; }
.dz__cta { font-size: 0.95rem; margin: 0; }
.dz__cta strong { font-weight: 700; }
.dz__browse {
  background: none; border: none; padding: 0;
  color: var(--dz-accent); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; font: inherit;
}
.dz__browse:hover { text-decoration-thickness: 2px; }
.dz__hint {
  font-size: 0.75rem; color: var(--dz-ink-soft);
  margin: 0.5rem 0 0; letter-spacing: 0.02em;
}
.dz__hint code { font-family: ui-monospace, Menlo, monospace; font-size: 0.95em;
  background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 3px; }

.dz__preview { padding: 0.25rem; }
.dz__files { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.dz__file {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
}
.dz__thumb {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.04); border-radius: 4px; overflow: hidden;
}
.dz__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz__file-icon { font-size: 1.75rem; opacity: 0.7; }
.dz__meta { min-width: 0; }
.dz__name {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.85rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz__sub { font-size: 0.72rem; color: var(--dz-ink-soft); margin-top: 2px; }
.dz__remove {
  background: none; border: 1px solid rgba(0,0,0,0.12);
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--dz-ink-soft);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.dz__remove:hover { background: var(--dz-accent-error); color: #fff; border-color: var(--dz-accent-error); }

.dz__actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  padding-top: 0.5rem; border-top: 1px dashed rgba(0,0,0,0.08);
}
.dz__actions button {
  background: #fff; border: 1px solid rgba(0,0,0,0.16);
  padding: 0.4rem 0.85rem; border-radius: 5px;
  font: inherit; font-size: 0.82rem; cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.dz__actions button:hover {
  background: var(--dz-accent); color: #fff; border-color: var(--dz-accent);
}
.dz__add { font-weight: 600; }
.dz__export { font-weight: 600; }
.dz__clear { color: var(--dz-ink-soft); }
.dz__clear:hover { background: var(--dz-accent-error) !important; border-color: var(--dz-accent-error) !important; }

.dz__status {
  font-size: 0.78rem; color: var(--dz-ink-soft);
  margin: 0.5rem 0 0; min-height: 1.2em;
}
.dz__status.is-error { color: var(--dz-accent-error); }