.direct-upload-container-semantic {
  @apply p-6 bg-white space-y-4 border-b border-gray-200;
}

.upload-form-header {
  @apply text-xl font-semibold text-gray-800;
}

.upload-form-description {
  @apply text-sm text-gray-600;
}

.upload-file-input-container-semantic {
  @apply flex items-center justify-center w-full;
}

.file-selection-area {
  @apply w-full;
}

.upload-file-input-container-semantic input[type="file"] {
  @apply hidden;
}

.upload-file-input-label {
  @apply flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors duration-200;
}

.upload-file-input-label-text {
  @apply text-sm text-gray-500;
}

.upload-file-input-label-subtext {
  @apply text-xs text-gray-400 mt-1;
}

.upload-actions-semantic {
}

.direct-upload-actions-semantic input[type="submit"] {
  @apply px-4 py-2 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200 w-full;
  background-color: rgb(47, 183, 125, 0.8) !important;
}

.direct-upload-actions-semantic input[type="submit"]:hover {
  background-color: rgb(34, 132, 90, 0.8) !important;
}

.direct-upload-submit-button-uploading {
  @apply opacity-70 cursor-not-allowed;
}

.direct-upload-submit-button:disabled {
  @apply opacity-70 cursor-not-allowed hover:bg-blue-600;
}

#direct-uploads-log {
  @apply mt-4 text-sm text-gray-500 max-h-36 overflow-y-auto border border-gray-200 rounded-lg p-2;
}

/* Selected files display */
.selected-files-container {
  @apply w-full;
}

.selected-files-header {
  @apply flex justify-between items-center mb-2 p-2;
}

.selected-files-count {
  @apply text-sm font-medium text-gray-700;
}

.selected-files-list {
  @apply border border-gray-200 rounded-lg max-h-128 overflow-y-auto divide-y divide-gray-200;
}

.selected-file-item {
  @apply flex items-center py-2 px-3 hover:bg-gray-50 relative overflow-hidden;
}

.selected-file-info {
  @apply flex-1 flex items-center z-10;
}

.selected-file-name {
  @apply text-sm text-gray-800 flex-1 max-w-52;
  /* ensure the name is cut off after 20 characters */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

}

.selected-file-progress-bar {
  @apply absolute top-0 left-0 h-full bg-blue-100 transition-all duration-300 ease-out z-0;
}

.selected-file-progress-bar.hidden {
  @apply hidden;
}

.selected-file-progress-text {
  @apply text-xs font-medium text-blue-600 ml-2 z-10;
}

.selected-file-progress-text.hidden {
  @apply hidden;
}

.selected-file-progress-complete {
  @apply bg-blue-200;
}

.upload-complete {
  @apply bg-gray-50;
}

.selected-file-size {
  @apply text-xs text-gray-500 ml-2;
}

.select-different-files {
  @apply text-xs text-blue-600 hover:text-blue-800 hover:underline;
}

.highlight-active-upload {
  @apply bg-blue-50 transition-colors duration-700;
}

.upload-entity-notification {
  @apply bg-yellow-50 border border-yellow-200 p-2 text-sm text-gray-500;
}

/* File Validation Modal */
.file-validation-modal-overlay {
  @apply fixed inset-0 bg-black/50 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300;
  z-index: 10000; /* Higher than tag selector dropdown */
}

.file-validation-modal-overlay.active {
  @apply opacity-100;
}

.file-validation-modal {
  @apply bg-white rounded-lg shadow-xl max-w-lg w-full transform scale-95 transition-all duration-300;
  max-height: calc(100vh - 3rem);
}

.file-validation-modal-overlay.active .file-validation-modal {
  @apply scale-100;
}

.file-validation-modal-header {
  @apply flex items-center justify-between p-4 border-b border-gray-200 bg-red-50;
}

.file-validation-modal-title {
  @apply text-lg font-semibold text-red-800 flex items-center;
}

.file-validation-modal-icon {
  @apply h-5 w-5 text-red-600 mr-2;
}

.file-validation-modal-close {
  @apply text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors;
}

.file-validation-modal-close-icon {
  @apply h-6 w-6;
}

.file-validation-modal-body {
  @apply p-4 overflow-y-auto flex-1;
}

.file-validation-modal-message {
  @apply text-sm text-gray-700 leading-relaxed mb-4;
}

.file-validation-modal-files-list {
  @apply space-y-3 max-h-64 overflow-y-auto;
}

.file-validation-modal-file-item {
  @apply p-3 bg-red-50 border border-red-200 rounded-md;
}

.file-validation-modal-filename {
  @apply font-medium text-red-800 text-sm mb-1 break-all;
}

.file-validation-modal-errors {
  @apply text-xs text-red-600 space-y-1;
}

.file-validation-modal-error {
  @apply block;
}

.file-validation-modal-footer {
  @apply p-4 border-t border-gray-200 bg-gray-50 flex justify-end;
}

.file-validation-modal-button {
  @apply px-4 py-2 text-sm font-medium text-white rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors;
  background-color: rgb(239, 68, 68);
}

.file-validation-modal-button:hover {
  background-color: rgb(220, 38, 38);
}