/* Text Compare Specific Styles */
.comparison-result {
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

/* Simplified highlighting - only one style for differences */
.diff-highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid #ffeeba;
}

/* Alternative red highlighting (uncomment to use red instead of yellow) */
/*
.diff-highlight {
    background-color: #f8d7da;
    color: #721c24;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid #f5c6cb;
}
*/

.comparison-result:empty::before {
    content: "Comparison results will appear here...";
    color: #6c757d;
    font-style: italic;
}

/* Results section styling */
#resultsSection {
    border-top: 2px solid #e9ecef;
    border-bottom: 2px solid #e9ecef;
    padding: 20px 0;
    margin: 20px 0;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
}

/* Input textareas styling */
#leftText, #rightText {
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    #leftText:focus, #rightText:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Force side-by-side layout for comparison results */
    #resultsSection .row {
        display: flex;
        flex-wrap: wrap;
    }

    #resultsSection .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Ensure proper spacing between columns */
    #resultsSection .col-md-6:first-of-type {
        padding-right: 0.75rem;
    }

    #resultsSection .col-md-6:last-of-type {
        padding-left: 0.75rem;
    }

    /* Responsive behavior - stack on very small screens */
    @media (max-width: 576px) {
        #resultsSection .col-md-6 {
            flex: 0 0 100%;
            max-width: 100%;
        }
        
        #resultsSection .col-md-6:first-of-type,
        #resultsSection .col-md-6:last-of-type {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
    }