/* Reusable Component Styles */

/* Card Components */
.card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 transition-all duration-300;
}

.card-hover {
    @apply hover:shadow-xl hover:-translate-y-1;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-100;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-100 bg-gray-50;
}

/* Button Components */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl hover:bg-blue-700 transition-all duration-300 flex items-center justify-center space-x-3;
}

.btn-secondary {
    @apply bg-gray-100 text-gray-700 px-6 py-3 rounded-xl font-medium border border-gray-200 hover:bg-gray-50 hover:shadow-md transition-all duration-300 flex items-center justify-center space-x-3;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl hover:bg-green-700 transition-all duration-300 flex items-center justify-center space-x-3;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl hover:bg-red-700 transition-all duration-300 flex items-center justify-center space-x-3;
}

/* Form Components */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-group {
    @apply mb-6;
}

/* Status Components */
.status-badge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}

.status-available {
    @apply bg-green-100 text-green-800;
}

.status-checked-out {
    @apply bg-amber-100 text-amber-800;
}

.status-maintenance {
    @apply bg-red-100 text-red-800;
}

.status-damaged {
    @apply bg-red-100 text-red-800;
}

/* Table Components */
.table {
    @apply min-w-full divide-y divide-gray-200;
}

.table-header {
    @apply bg-gray-50;
}

.table-header th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-body {
    @apply bg-white divide-y divide-gray-200;
}

.table-body td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Alert Components */
.alert {
    @apply p-4 rounded-xl border;
}

.alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
}

.alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
}

.alert-warning {
    @apply bg-amber-50 border-amber-200 text-amber-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

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

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

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Utility Classes */
.text-gradient {
    @apply bg-gradient-to-r from-gray-900 via-blue-800 to-purple-800 bg-clip-text text-transparent;
}

.shadow-soft {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-soft-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger {
        @apply px-4 py-2 text-sm;
    }

    .card-body {
        @apply px-4 py-3;
    }
}