/* Custom CLIMB styles */

/* HTMX loading indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

/* Custom loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Task priority indicators */
.priority-high {
    @apply bg-red-100 text-red-800 border-red-200;
}

.priority-medium {
    @apply bg-yellow-100 text-yellow-800 border-yellow-200;
}

.priority-low {
    @apply bg-green-100 text-green-800 border-green-200;
}

/* Task status indicators */
.status-pending {
    @apply bg-gray-100 text-gray-800 border-gray-200;
}

.status-in-progress {
    @apply bg-blue-100 text-blue-800 border-blue-200;
}

.status-completed {
    @apply bg-green-100 text-green-800 border-green-200;
}

.status-overdue {
    @apply bg-red-100 text-red-800 border-red-200;
}

/* Form enhancements */
.form-input:focus {
    @apply ring-2 ring-blue-500 border-blue-500;
}

.form-error {
    @apply border-red-300 focus:ring-red-500 focus:border-red-500;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 6px;
}

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