/* Minimal styles for the drag & drop uploader */
.ddau-dropzone{
  border: 2px dashed #bbb;
  padding: 14px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  margin: 6px 0 10px;
}
.ddau-dropzone.dragover{ background: #f5f5f5; }
.ddau-instructions{ font-size: 14px; margin-bottom: 8px; }
.ddau-input{ display:none; } /* hide native input to show DnD box */
.ddau-list{ list-style:none; margin:0; padding:0; text-align:left; }
.ddau-item{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:6px 8px; border:1px solid #eee; border-radius:4px; margin:6px 0; }
.ddau-item.uploading .status{ font-style: italic; }
.ddau-remove{ background:#eee; border:0; padding:4px 8px; border-radius:4px; cursor:pointer; }

/* Progress bar */
.ddau-progress{
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
  margin-left: 10px;
}
.ddau-bar{
  height: 100%;
  width: 0%;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.15) 25%,
    rgba(0,0,0,0) 25%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.15) 75%,
    rgba(0,0,0,0) 75%,
    rgba(0,0,0,0) 100%
  );
  background-size: 20px 100%;
  animation: ddau-stripes 1s linear infinite;
}
@keyframes ddau-stripes {
  from { background-position: 0 0; }
  to   { background-position: 20px 0; }
}

/* Completed state: stop the stripes and set solid bar */
.ddau-complete .ddau-bar{
  animation: none;
  background: #c8e6c9;
}

/* Keep items aligned nicely with the progress bar */
.ddau-item .name { flex: 0 1 auto; min-width: 0; }
.ddau-item .size { flex: 0 0 auto; opacity: 0.8; }
.ddau-item .ddau-status { flex: 0 0 auto; opacity: 0.8; }