/* Custom styles for Rule Editor */

/* Form Elements */
.form-input {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500;
}

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

/* Buttons */
.btn {
    @apply px-4 py-2 rounded transition-all;
}

.btn-primary {
    @apply bg-blue-500 text-white hover:bg-blue-600;
}

.btn-success {
    @apply bg-green-500 text-white hover:bg-green-600;
}

/* Rule List */
.rule-item {
    @apply p-4 hover:bg-gray-50 cursor-pointer transition-all;
}

.rule-item.active {
    @apply bg-blue-50 border-l-4 border-blue-500;
}

/* Condition Builder */
.condition-group {
    @apply p-4 bg-gray-50 rounded-lg space-y-4;
}

.condition-row {
    @apply flex items-center space-x-4;
}

/* Visual Rule Builder */
.rule-builder {
    @apply p-4 bg-white rounded-lg shadow;
}

.rule-node {
    @apply p-4 bg-gray-50 rounded-lg border border-gray-200;
}

.rule-connector {
    @apply h-8 w-0.5 bg-gray-300 mx-auto;
}

/* Status Indicators */
.status-badge {
    @apply px-2 py-1 text-xs rounded-full;
}

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

.status-draft {
    @apply bg-yellow-100 text-yellow-800;
}

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

/* Rule Preview */
.rule-preview {
    @apply p-4 bg-gray-50 rounded-lg;
}

.rule-preview-title {
    @apply text-lg font-medium mb-2;
}

.rule-preview-content {
    @apply text-sm text-gray-600;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .condition-row {
        @apply flex-col space-x-0 space-y-4;
    }
    
    .condition-row > * {
        @apply w-full;
    }
}

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

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Custom Scrollbar */
.rule-list::-webkit-scrollbar {
    @apply w-2;
}

.rule-list::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

.rule-list::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded-full;
}

.rule-list::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400;
}