/* SenstxAI Basic Styling */
/* Copyright (c) 2025, Datafyn and contributors */

/* AI Generation Status Indicators */
.ai-generation-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.ai-generation-status.draft {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.ai-generation-status.queued {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.ai-generation-status.processing {
    background-color: #cce5ff;
    color: #0066cc;
    border: 1px solid #99ccff;
}

.ai-generation-status.completed {
    background-color: #d1edcc;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ai-generation-status.failed {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Quality Score Indicators */
.quality-score {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.quality-score.high {
    color: #28a745;
}

.quality-score.medium {
    color: #ffc107;
}

.quality-score.low {
    color: #dc3545;
}

/* AI Provider Connection Status */
.provider-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.provider-status.connected {
    background-color: #28a745;
}

.provider-status.failed {
    background-color: #dc3545;
}

.provider-status.not-tested {
    background-color: #6c757d;
}

/* Form Enhancements */
.senstxai-form-section {
    border-left: 3px solid #007bff;
    padding-left: 15px;
    margin: 10px 0;
}

.senstxai-help-text {
    font-size: 13px;
    color: #6c757d;
    margin-top: 4px;
}

/* Loading States */
.senstxai-loading {
    opacity: 0.7;
    pointer-events: none;
}

.senstxai-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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