MediaCollectorLibary/public/resources/scss/app.scss

// Import Tailwind CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

// Custom styles
body {
    @apply antialiased text-gray-900 bg-gray-50;
}

// Card styles
.card {
    @apply bg-white rounded-lg shadow overflow-hidden;
    
    &-header {
        @apply px-6 py-4 border-b border-gray-200;
        
        h2 {
            @apply text-lg font-medium text-gray-900;
        }
    }
    
    &-body {
        @apply p-6;
    }
}

// Button styles
.btn {
    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
    
    &-primary {
        @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
    }
    
    &-secondary {
        @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
    }
    
    &-danger {
        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
    }
}

// Form styles
.form-group {
    @apply mb-4;
    
    label {
        @apply block text-sm font-medium text-gray-700 mb-1;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
    }
    
    .form-error {
        @apply mt-1 text-sm text-red-600;
    }
}

// Alert styles
.alert {
    @apply p-4 rounded-md;
    
    &-success {
        @apply bg-green-50 text-green-800;
    }
    
    &-error {
        @apply bg-red-50 text-red-800;
    }
    
    &-info {
        @apply bg-blue-50 text-blue-800;
    }
    
    &-warning {
        @apply bg-yellow-50 text-yellow-800;
    }
}

// Animation utilities
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

// Responsive table
.table-responsive {
    @apply overflow-x-auto;
    
    table {
        @apply min-w-full divide-y divide-gray-200;
        
        thead {
            @apply bg-gray-50;
            
            th {
                @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
            }
        }
        
        tbody {
            @apply bg-white divide-y divide-gray-200;
            
            tr {
                @apply hover:bg-gray-50;
                
                td {
                    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
                }
            }
        }
    }
}