@charset "utf-8";
/* CSS Document */
/* ==================== NOTIFICATIONS ==================== */
#notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* allows clicks through container */
}

.notification {
  min-width: 280px;
  max-width: 90vw;
  padding: 14px 18px;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateX(150%);
  animation: slideIn 0.4s forwards;
  pointer-events: auto; /* allows interaction with notification itself */
}

.notification.success { background: #f9a825; }
.notification.error   { background: #c62828; }
.notification.warning { background: #696fd3; }

@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(150%); }
}

#dropZone {
  border: 2px dashed #f9a825;  /* yellow dashed border */
  padding: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 6px;
  color: #222;
  font-weight: 500;
}

#dropZone.hover { border-color: #c68400; }

#totalProgressContainer {
  display: none;
  margin-top: 10px;
  border-radius: 6px;
  padding: 4px;
  background: transparent; /* remove preloaded yellow background */
}

#totalProgress {
  width: 100%;
  height: 16px;
  border-radius: 6px;
  background-color: #e0e0e0; /* neutral track background */
  overflow: hidden;
  appearance: none;
}

#totalProgress::-webkit-progress-bar {
  background-color: #e0e0e0; /* neutral track for Chrome/Safari */
}

#totalProgress::-webkit-progress-value {
  background-color: #f9a825; /* filled portion yellow */
}

#totalProgress::-moz-progress-bar {
  background-color: #f9a825; /* filled portion yellow for Firefox */
}

#totalProgressText {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  margin-top: 4px;
}