/* Main styles for Data Point Tracking */

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

footer {
    margin-top: auto;
}

.badge {
    font-size: 0.875rem;
}

/* Custom badge colors */
.bg-purple {
    background-color: #6f42c1 !important;
    color: white;
}

.card {
    margin-bottom: 1rem;
}

pre {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    overflow-x: auto;
}

/* Accuracy badges */
.accuracy-badge {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
}

.accuracy-high {
    background-color: #28a745;
    color: white;
}

.accuracy-medium {
    background-color: #ffc107;
    color: black;
}

.accuracy-low {
    background-color: #dc3545;
    color: white;
}

/* Best experiment highlight */
.best-experiment-card {
    border: 2px solid #28a745;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.3);
}

/* Metric status badges */
.status-correct {
    background-color: #28a745;
}

.status-false-positive {
    background-color: #ffc107;
}

.status-false-negative {
    background-color: #dc3545;
}

.status-false-negative-rrag {
    background-color: #e83e8c;
}

.status-wrong-positive {
    background-color: #fd7e14;
}

/* Experiment table */
.experiment-table {
    font-size: 0.9rem;
}

.experiment-table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.experiment-table .best-row {
    background-color: #d4edda;
    font-weight: 500;
}

/* ========================================
   QA Review UI Styles (Compact)
   ======================================== */

/* Status badge colors */
.status-correct { background-color: #28a745; color: white; }
.status-false-positive { background-color: #ffc107; color: black; }
.status-false-negative { background-color: #dc3545; color: white; }
.status-false-negative-rrag { background-color: #e83e8c; color: white; }  /* Pink/magenta for RRAG failures */
.status-wrong-positive { background-color: #fd7e14; color: white; }

/* Filter badges */
.filter-badge {
    text-decoration: none;
    cursor: pointer;
    font-size: 0.75rem;
    margin-right: 0.25rem;
}
.filter-badge:hover { opacity: 0.8; }
.filter-badge.active { font-weight: bold; box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }

/* Filter section container */
.filter-section {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.filter-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: #495057;
    min-width: 75px;
    flex-shrink: 0;
}

.filter-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.filter-section .form-check-label {
    color: #495057;
    font-size: 0.85rem;
}

.filter-section .form-check-input {
    margin-top: 0.2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .filter-section {
        padding: 8px;
    }

    .filter-label {
        min-width: auto;
        width: 100%;
        margin-bottom: 4px;
    }
}

/* Document result row */
.doc-result-row {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background: #fff;
}
.doc-header {
    background: #f8f9fa;
    padding: 4px 8px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.doc-id {
    font-size: 0.8rem;
    color: #495057;
}
.doc-header a:hover .doc-id {
    text-decoration: underline;
    cursor: pointer;
}

/* ========================================
   JSON Comparison (Side by Side)
   ======================================== */

.json-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #dee2e6;
    border-top: none;
}

.json-panel {
    min-height: 60px;
}

.json-panel-header {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    background: #e9ecef;
    border-bottom: 1px solid #dee2e6;
}

.json-qa {
    border-right: 1px solid #dee2e6;
}

.json-qa .json-panel-header {
    background: #cfe2ff;
    color: #084298;
}

.json-pred .json-panel-header {
    background: #d1e7dd;
    color: #0f5132;
}

.json-panel-body {
    padding: 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    background: #fff;
}

.json-field {
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
}

.json-key {
    color: #0d6efd;
    font-weight: 500;
}

.json-value {
    color: #212529;
    margin-left: 4px;
}

.json-empty {
    color: #6c757d;
    font-style: italic;
}

/* Field highlighting for match/mismatch */
.json-field.field-match {
    background-color: #d4edda;
}

.json-field.field-mismatch {
    background-color: #f8d7da;
}

/* ========================================
   Context Comparison (Side by Side)
   ======================================== */

.context-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #dee2e6;
    border-top: none;
    margin-top: -1px;
}

.context-panel {
    min-height: 80px;
}

.context-panel-header {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 8px;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffecb5;
}

.context-qa {
    border-right: 1px solid #dee2e6;
}

.context-panel-body {
    padding: 8px;
    font-size: 0.8rem;
    background: #fffdf5;
    color: #495057;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

/* ========================================
   Notes UI Styles
   ======================================== */

/* Note icon button in doc header */
.note-icon {
    background: none;
    border: none;
    padding: 2px 6px;
    cursor: pointer;
    color: #6c757d;
    font-size: 0.9rem;
    border-radius: 4px;
}
.note-icon:hover {
    background: #e9ecef;
    color: #0d6efd;
}
.note-icon i.bi-chat-fill {
    color: #0dcaf0;
}
.note-count {
    font-size: 0.7rem;
    margin-left: 2px;
    color: #0dcaf0;
}

/* Notes in modal */
.note-item {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
}
.note-item:last-child {
    margin-bottom: 0;
}
.note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.75rem;
}
.note-author {
    font-weight: 600;
    color: #495057;
}
.note-time {
    color: #6c757d;
}
.note-content {
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.note-doc-info {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #dee2e6;
}
.note-doc-info code {
    font-size: 0.75rem;
}

/* Notes modal */
#notesModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}
#addNoteForm textarea {
    resize: vertical;
    min-height: 60px;
}

/* ========================================
   Multi-Context Answer Cards
   ======================================== */

/* Answers comparison container */
.answers-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid #dee2e6;
}

/* Answer panels (QA and Predictions) */
.answers-panel {
    min-height: 80px;
}

.qa-panel {
    border-right: 1px solid #dee2e6;
}

.answers-panel-header {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 10px;
    border-bottom: 1px solid #dee2e6;
}

.qa-panel .answers-panel-header {
    background: #cfe2ff;
    color: #084298;
}

.pred-panel .answers-panel-header {
    background: #d1e7dd;
    color: #0f5132;
}

.answers-panel-body {
    padding: 8px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.answers-empty {
    color: #6c757d;
    font-style: italic;
    font-size: 0.8rem;
    padding: 8px;
}

/* Individual answer cards */
.answer-card {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.answer-card.matched {
    border-color: #28a745;
    border-left: 3px solid #28a745;
}

.answer-card.unmatched {
    border-color: #dc3545;
    border-left: 3px solid #dc3545;
}

.answer-card.extra {
    border-color: #fd7e14;
    border-left: 3px solid #fd7e14;
}

.answer-card.context-only {
    border-color: #ffc107;
    border-left: 3px solid #ffc107;
}

/* Answer header */
.answer-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.75rem;
}

.answer-index {
    font-weight: 600;
    color: #495057;
}

.match-badge {
    color: #28a745;
    font-weight: 500;
    font-size: 0.7rem;
}

.unmatch-badge {
    color: #dc3545;
    font-weight: 500;
    font-size: 0.7rem;
}

.extra-badge {
    color: #fd7e14;
    font-weight: 500;
    font-size: 0.7rem;
}

.context-match-badge {
    color: #856404;
    background: #fff3cd;
    font-weight: 500;
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: 3px;
}

.answer-score {
    margin-left: auto;
    color: #6c757d;
    font-size: 0.7rem;
    background: #e9ecef;
    padding: 1px 6px;
    border-radius: 3px;
}

/* Answer value */
.answer-value {
    padding: 6px 8px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
}

.value-field {
    padding: 1px 0;
    border-radius: 2px;
}

.value-field.value-match {
    /* Matching values - subtle green background */
    background-color: rgba(40, 167, 69, 0.08);
}

.value-field.value-mismatch {
    /* Mismatching values - highlight with red background */
    background-color: rgba(220, 53, 69, 0.15);
    padding: 1px 4px;
    margin: 1px -4px;
}

.field-key {
    color: #0d6efd;
    font-weight: 500;
}

.value-empty {
    color: #6c757d;
    font-style: italic;
}

/* Answer context */
.answer-context {
    padding: 6px 8px;
    background: #fffdf5;
    border-top: 1px solid #dee2e6;
    font-size: 0.75rem;
    color: #6c757d;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Highlighted matched context in predictions */
.context-match {
    background-color: rgba(25, 135, 84, 0.15);
    border-bottom: 2px dotted #198754;
    padding: 1px 0;
}

/* Small badge variant */
.badge-sm {
    font-size: 0.65rem;
    padding: 2px 5px;
}

/* ========================================
   Aligned Answer Comparison Layout
   ======================================== */

.answers-comparison-aligned {
    border-top: 1px solid #dee2e6;
}

.answers-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.answers-header-row .qa-col .answers-panel-header {
    background: #cfe2ff;
    color: #084298;
    border-right: 1px solid #dee2e6;
}

.answers-header-row .pred-col .answers-panel-header {
    background: #d1e7dd;
    color: #0f5132;
}

.answer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e9ecef;
}

.answer-row:last-child {
    border-bottom: none;
}

.answers-col {
    padding: 8px;
    background: #fafafa;
}

.answers-col.qa-col {
    border-right: 1px solid #dee2e6;
}

/* Placeholder for empty side of unmatched rows */
.answer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    color: #adb5bd;
    font-size: 1.5rem;
    font-weight: 300;
}

/* Row type indicators */
.matched-row {
    background: linear-gradient(to right, rgba(40, 167, 69, 0.03), rgba(40, 167, 69, 0.03));
}

.context-match-row {
    background: linear-gradient(to right, rgba(255, 193, 7, 0.08), rgba(255, 193, 7, 0.08));
}

.unmatched-row .qa-col {
    background: rgba(220, 53, 69, 0.03);
}

.extra-row .pred-col {
    background: rgba(253, 126, 20, 0.03);
}