/* Custom styles for Sirex RWA Dashboard */

:root {
    --primary: #00d4aa;
    --dark: #0f1117;
    --dark-lighter: #1a1d29;
    --gray-800: #1f2937;
}

/* Smooth transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gray-800);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Loading animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Chart containers */
canvas {
    max-height: 300px;
}

/* Event markers on map */
.event-marker {
    background-color: var(--primary);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid white;
}

/* Stress level indicators */
.stress-low {
    color: #10b981;
}

.stress-medium {
    color: #f59e0b;
}

.stress-high {
    color: #ef4444;
}

/* Agent cards */
.agent-card {
    background: var(--dark-lighter);
    border: 1px solid var(--gray-800);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.agent-card:hover {
    border-color: var(--primary);
}

/* Consensus bars */
.consensus-bar {
    height: 24px;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Tag badges */
.tag-fed {
    background-color: #1e40af;
    color: #93c5fd;
}

.tag-reg {
    background-color: #7c2d12;
    color: #fdba74;
}

.tag-geo {
    background-color: #7f1d1d;
    color: #fca5a5;
}

.tag-market {
    background-color: #065f46;
    color: #6ee7b7;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

/* AI Commentary formatting */
#ai-commentary {
    line-height: 1.8;
}

/* Highlight section headers in commentary */
#ai-commentary::first-line {
    font-weight: 600;
    color: #fbbf24;
}