/* Custom styles for Hiveprompt */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation for loading states */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

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

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors;
}

.btn-outline {
    @apply border border-gray-300 hover:border-gray-400 text-gray-700 px-4 py-2 rounded-md text-sm font-medium transition-colors;
}

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

/* Form input focus styles */
.input-focus {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* Tag styles */
.tag {
    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

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

.tag-gray {
    @apply bg-gray-100 text-gray-800;
}

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

/* Modal backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

/* Toast notifications */
.toast {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden;
}

.toast-success {
    @apply bg-green-50 border-l-4 border-green-400;
}

.toast-error {
    @apply bg-red-50 border-l-4 border-red-400;
}

/* Loading skeleton */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Custom utilities */
.text-truncate {
    @apply overflow-hidden whitespace-nowrap text-ellipsis;
}

/* HTMX loading indicator */
.htmx-indicator {
    @apply opacity-0 transition-opacity duration-200;
}

.htmx-request .htmx-indicator {
    @apply opacity-100;
}

.htmx-request.htmx-indicator {
    @apply opacity-100;
}