/* Aerfoirt custom styles */

.nav-link {
    @apply inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300 transition duration-150;
}
.nav-link.active {
    @apply text-gray-900 border-blue-600;
}

.btn-primary {
    @apply inline-flex items-center px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500 transition duration-150;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-blue-500 transition duration-150;
}

.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4;
}

.badge {
    @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-full;
}

.badge-success {
    @apply badge bg-green-50 text-green-700;
}

.badge-warning {
    @apply badge bg-yellow-50 text-yellow-700;
}

.badge-error {
    @apply badge bg-red-50 text-red-700;
}

/* Timeline grid */
.timeline-cell {
    @apply border border-gray-200 p-2 text-xs cursor-pointer hover:bg-blue-50 transition duration-150 min-h-[60px];
}

.timeline-header {
    @apply sticky top-0 bg-gray-50 z-10 border-b border-gray-300 py-2 px-2 text-xs font-medium text-gray-500 uppercase tracking-wider;
}

/* Drag and drop */
.draggable {
    @apply cursor-grab;
}
.draggable:active {
    @apply cursor-grabbing;
}
.drag-over {
    @apply bg-blue-50 border-blue-300;
}

/* Form elements */
.form-input {
    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500;
}

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

.form-error {
    @apply text-sm text-red-600 mt-1;
}

/* Loading states */
.htmx-request .spinner {
    @apply block;
}
.htmx-request.spinner {
    @apply block;
}
.spinner {
    @apply hidden;
}

/* Toast notifications */
.toast {
    @apply fixed bottom-4 right-4 z-50 rounded-lg shadow-lg p-4 max-w-sm;
}
.toast-success {
    @apply toast bg-green-50 text-green-700 border border-green-200;
}
.toast-error {
    @apply toast bg-red-50 text-red-700 border border-red-200;
}