/* ==========================================================================
   Report Content Styling - Specialized for LLM-generated HTML content
   ========================================================================== */

/* Section Headers */
.section-header {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--border-color);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Report paragraphs */
.k-editor-content p,
.report-content-html p {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Error detection display paragraphs - Clean override without !important */
.report-content p,
.report-content p.p1,
.report-content p.p2,
.report-content p.p3,
.report-content p.p4,
.report-content p.p5 {
    margin: 0;
    margin-bottom: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Line breaks in report content */
.k-editor-content br,
.report-content-html br {
    line-height: 1.6;
}

/* Enhance readability of generated content */
.k-editor-content,
.report-content-html {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--text-primary);
}

/* Ensure section headers are properly styled in editor */
.k-editor-content .section-header,
.report-content-html .section-header {
    display: block;
    margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-xs);
}

/* Print styles for reports */
@media print {
    .section-header {
        font-size: 12pt;
        margin: 12pt 0 6pt 0;
        page-break-after: avoid;
        color: #000;
        border-bottom-color: #333;
    }
    
    .report-table {
        font-size: 10pt;
        page-break-inside: avoid;
        color: #000;
    }
    
    .report-table th {
        background-color: #f5f5f5;
        color: #000;
        border-color: #333;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
    
    .report-table td {
        color: #000;
        border-color: #333;
    }
    
    .report-table tr:nth-child(even) {
        background-color: #f9f9f9;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

/* AI Changed Text Highlighting */
.ai-changed {
    background-color: rgba(255, 193, 7, 0.2); /* Light amber/yellow background */
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    border-left: 3px solid rgba(255, 193, 7, 0.6);
    transition: background-color 0.2s ease;
}

/* Ensure highlighting works in editor content */
.k-editor-content .ai-changed,
.report-content-html .ai-changed,
.report-readonly-content .ai-changed,
.error-highlighted-report .ai-changed {
    background-color: rgba(255, 193, 7, 0.2);
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 3px;
    border-left: 3px solid rgba(255, 193, 7, 0.6);
}

/* Print styles - reduce opacity for printing */
@media print {
    .ai-changed {
        background-color: rgba(255, 193, 7, 0.15);
        border-left-color: rgba(255, 193, 7, 0.4);
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}

/* Note: Dark mode styling is now handled via CSS custom properties in 01-variables.css */

/* ==========================================================================
   Diff Visualization Styles - Error Detection Simple Mode
   ========================================================================== */

/* Diff visualization styles - displayed in Telerik editor */
.diff-added {
    background-color: rgba(0, 255, 0, 0.3);
    color: #155724;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.diff-added:hover {
    background-color: rgba(0, 255, 0, 0.5);
    outline: 2px solid rgba(0, 255, 0, 0.7);
}

.diff-removed {
    background-color: rgba(255, 0, 0, 0.3);
    color: #721c24;
    padding: 2px 4px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.diff-removed:hover {
    background-color: rgba(255, 0, 0, 0.5);
    outline: 2px solid rgba(255, 0, 0, 0.7);
}

/* Ensure diff spans work within Telerik editor */
.report-editor .diff-added,
.report-editor .diff-removed {
    display: inline;
    user-select: none; /* Prevent text selection when clicking */
}

/* Ensure diff backgrounds are visible by default inside the Telerik editor content */
.k-editor-content .diff-added,
.k-content .diff-added,
.ProseMirror .diff-added {
    background-color: rgba(0, 255, 0, 0.35) !important;
}

.k-editor-content .diff-removed,
.k-content .diff-removed,
.ProseMirror .diff-removed {
    background-color: rgba(255, 0, 0, 0.35) !important;
}

/* Error controls bar for Simple mode */
.error-controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    margin-top: 0.5rem;
}

.error-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-badge {
    font-weight: 600;
    color: #495057;
}

.error-detail {
    color: #6c757d;
    font-size: 0.875rem;
}

.error-actions {
    display: flex;
    gap: 0.5rem;
}

/* Dark mode support for diff visualization */
@media (prefers-color-scheme: dark) {
    .diff-added {
        background-color: rgba(0, 200, 0, 0.3);
        color: #90ee90;
    }

    .diff-added:hover {
        background-color: rgba(0, 200, 0, 0.5);
        outline-color: rgba(0, 200, 0, 0.7);
    }

    .diff-removed {
        background-color: rgba(255, 100, 100, 0.3);
        color: #ffcccc;
    }

    .diff-removed:hover {
        background-color: rgba(255, 100, 100, 0.5);
        outline-color: rgba(255, 100, 100, 0.7);
    }

    .error-controls-bar {
        background-color: #2d2d2d;
        border-top-color: #404040;
    }

    .error-badge {
        color: #e0e0e0;
    }

    .error-detail {
        color: #b0b0b0;
    }
}