/**
 * CRO Audit Plugin Report Display CSS
 * Styles for displaying report data with appropriate visual indicators
 */

/* Score circle colors */
.cro-audit-report-score-circle {
    transition: background-color 0.3s ease;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.cro-audit-report-score-circle.score-low {
    background-color: #f44336;
    color: white;
}

.cro-audit-report-score-circle.score-medium {
    background-color: #ff9800;
    color: white;
}

.cro-audit-report-score-circle.score-high {
    background-color: #4caf50;
    color: white;
}

/* Section score colors */
.cro-audit-report-section-score {
    transition: background-color 0.3s ease;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.cro-audit-report-section-score.score-low {
    background-color: rgba(244, 67, 54, 0.1);
    color: #d32f2f;
}

.cro-audit-report-section-score.score-medium {
    background-color: rgba(255, 152, 0, 0.1);
    color: #ef6c00;
}

.cro-audit-report-section-score.score-high {
    background-color: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
}

/* Debug info styling */
.cro-audit-debug-info {
    background: #f0f0f0;
    padding: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #0073aa;
    font-family: monospace;
    font-size: 12px;
    overflow-x: auto;
}

/* Error message styling */
.cro-audit-error-message {
    background-color: #fff8f8;
    border-left: 4px solid #f44336;
    padding: 10px;
    margin: 10px 0;
    color: #333;
}

/* Loading indicator */
.cro-audit-loading {
    text-align: center;
    padding: 20px;
}

.cro-audit-loading:after {
    content: "...";
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: ".";
    }
    40% {
        content: "..";
    }
    60% {
        content: "...";
    }
    80%, 100% {
        content: "";
    }
}

/* Fix for JSON display in paragraphs */
.cro-audit-report-summary p,
.cro-audit-report-issue-description p,
.cro-audit-report-issue-recommendation p,
.cro-audit-report-issue-experiment p {
    word-break: break-word;
}

/* Section header with score */
.cro-audit-report-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* Issue styling */
.cro-audit-report-issue {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

.cro-audit-report-issue-meta {
    display: flex;
    gap: 10px;
    margin: 10px 0;
}

.cro-audit-report-issue-impact,
.cro-audit-report-issue-effort {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.9em;
}

.cro-audit-report-issue-impact-high {
    background-color: #ffebee;
    color: #c62828;
}

.cro-audit-report-issue-impact-medium {
    background-color: #fff3e0;
    color: #ef6c00;
}

.cro-audit-report-issue-impact-low {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.cro-audit-report-issue-effort-high {
    background-color: #ffebee;
    color: #c62828;
}

.cro-audit-report-issue-effort-medium {
    background-color: #fff3e0;
    color: #ef6c00;
}

.cro-audit-report-issue-effort-low {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* Quick wins section */
.cro-audit-report-quick-wins {
    margin: 20px 0;
    padding: 15px;
    background-color: #e8f5e9;
    border-radius: 4px;
}

.cro-audit-report-quick-wins h3 {
    color: #2e7d32;
    margin-top: 0;
}

.cro-audit-report-quick-wins ul {
    padding-left: 20px;
}

.cro-audit-report-quick-wins li {
    margin-bottom: 8px;
}