/**
 * Cross-Reference Styles for RAG UI
 */

/* Reference Container */
.reference-container {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--surface-color, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
}

.reference-display {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reference Sections */
.outgoing-references,
.incoming-references {
    margin-bottom: 1rem;
}

.outgoing-references:last-child,
.incoming-references:last-child {
    margin-bottom: 0;
}

.outgoing-references h4,
.incoming-references h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color, #4A9EFF);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.outgoing-references h4 i {
    color: #4CAF50;
}

.incoming-references h4 i {
    color: #2196F3;
}

/* Reference List */
.reference-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reference-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--card-background, #2a2a2a);
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.reference-item:hover {
    background: var(--hover-background, #333);
    transform: translateX(2px);
}

.reference-item:last-child {
    margin-bottom: 0;
}

/* Reference Status */
.reference-item.resolved {
    border-left-color: #4CAF50;
}

.reference-item.unresolved {
    border-left-color: #FF9800;
}

.reference-item.ambiguous {
    border-left-color: #FFC107;
}

.reference-item.failed {
    border-left-color: #f44336;
}

.reference-item.incoming {
    border-left-color: #2196F3;
}

/* Status Icons */
.status-resolved {
    color: #4CAF50;
}

.status-unresolved {
    color: #FF9800;
}

.status-ambiguous {
    color: #FFC107;
}

.status-failed {
    color: #f44336;
}

.status-unknown {
    color: #999;
}

/* Reference Text */
.ref-text {
    flex: 1;
    color: var(--text-color, #e0e0e0);
    font-size: 0.9rem;
}

/* Reference Type Badge */
.ref-type {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
}

.ref-type.internal {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
}

.ref-type.external {
    background: rgba(33, 150, 243, 0.2);
    color: #2196F3;
}

/* Confidence Badge */
.confidence-badge {
    padding: 0.25rem 0.5rem;
    background: rgba(74, 158, 255, 0.2);
    color: #4A9EFF;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Navigation Buttons */
.ref-navigate {
    padding: 0.375rem 0.75rem;
    background: var(--primary-color, #4A9EFF);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.ref-navigate:hover {
    background: var(--primary-hover, #3A8EEF);
    transform: translateY(-1px);
}

.ref-navigate i {
    font-size: 0.75rem;
}

/* Reference Toggle Button */
.reference-toggle {
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: var(--primary-color, #4A9EFF);
    border: 1px solid var(--primary-color, #4A9EFF);
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.reference-toggle:hover {
    background: rgba(74, 158, 255, 0.1);
}

/* No References Message */
.no-references {
    text-align: center;
    color: var(--text-muted, #999);
    font-style: italic;
    padding: 1rem;
}

/* Statistics Display */
.reference-stats {
    padding: 1.5rem;
    background: var(--surface-color, #1a1a1a);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.reference-stats h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color, #4A9EFF);
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat-card {
    padding: 1rem;
    background: var(--card-background, #2a2a2a);
    border-radius: 6px;
    text-align: center;
    border: 1px solid var(--border-color, #333);
}

.stat-card.success {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
}

.stat-card.warning {
    border-color: #FF9800;
    background: rgba(255, 152, 0, 0.1);
}

.stat-card.info {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color, #e0e0e0);
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted, #999);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.last-update {
    text-align: center;
    color: var(--text-muted, #999);
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Graph Visualization Container */
.reference-graph {
    width: 100%;
    height: 500px;
    background: var(--surface-color, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--border-color, #333);
    position: relative;
}

.reference-graph svg {
    width: 100%;
    height: 100%;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .reference-container {
        background: #0a0a0a;
    }
    
    .reference-item {
        background: #1a1a1a;
    }
    
    .reference-item:hover {
        background: #252525;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .reference-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .ref-navigate {
        width: 100%;
        justify-content: center;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Loading state */
.references-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted, #999);
}

.references-loading i {
    margin-right: 0.5rem;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}