/* Upload Progress Bar Styles */
.upload-progress-container {
    margin-top: 1rem;
}

.upload-progress-container .border {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.upload-progress-container .border-blue-300 {
    border-color: #93c5fd;
    background-color: #dbeafe;
}

.upload-progress-container .border-green-300 {
    border-color: #86efac;
    background-color: #dcfce7;
}

.upload-progress-container .border-red-300 {
    border-color: #fca5a5;
    background-color: #fee2e2;
}

.upload-progress-container .bg-primary {
    background-color: var(--primary-color, #10b981);
}

.upload-progress-container .bg-green-500 {
    background-color: #10b981;
}

.upload-progress-container .bg-red-500 {
    background-color: #ef4444;
}

.upload-progress-container .text-primary {
    color: var(--primary-color, #10b981);
}

.upload-progress-container .text-primary-dark {
    color: var(--primary-dark-color, #059669);
}

.upload-progress-container .animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Progress bar animations */
.upload-progress-container .h-2 {
    transition: width 0.3s ease-in-out;
}

/* Hover effects for interactive elements */
.upload-progress-container button:hover {
    opacity: 0.8;
}

.upload-progress-container button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Truncate long file names */
.upload-progress-container .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .upload-progress-container .max-w-xs {
        max-width: 8rem;
    }
    
    .upload-progress-container .text-sm {
        font-size: 0.75rem;
    }
}