/**
 * ThAD Admin Custom Styles
 * Supplements Tailwind CSS with brand-specific styling
 */

/* Custom animations and transitions */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Focus states with ThAD branding */
.focus-thad {
    @apply focus:ring-2 focus:ring-thad-primary focus:border-thad-primary;
}

/* Custom scrollbar for file lists */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1;
}

/* File upload dropzone */
.dropzone {
    @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-colors;
}

.dropzone.dragover {
    @apply border-thad-primary bg-blue-50;
}

/* Status badges */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-error {
    @apply bg-red-100 text-red-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Loading spinner overlay */
.loading-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

/* Responsive table wrapper */
.table-responsive {
    @apply overflow-x-auto shadow ring-1 ring-black ring-opacity-5 rounded-lg;
}

/* Custom button variants */
.btn-thad {
    @apply bg-thad-primary hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-thad-primary focus:ring-offset-2;
}

.btn-thad-outline {
    @apply border border-thad-primary text-thad-primary hover:bg-thad-primary hover:text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-thad-primary focus:ring-offset-2;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

/* Logo placeholder - will be updated with actual logo */
.logo-placeholder {
    @apply bg-gradient-to-br from-thad-primary to-thad-accent;
}