/* assets/css/central-bank-colors.css - UPDATED with Standardized Bank Headers */

/* ===========================================
   1. COLOR VARIABLE DEFINITIONS PER BANK
   =========================================== */

/* Federal Reserve (USA) - Blue & Green */
.fed {
    --bank-primary: #2563eb;
    --bank-secondary: #059669;
    --bank-accent: #1e40af;
    --bank-light: #dbeafe;
    --bank-dark: #1e293b;
}

/* European Central Bank - EU Blue */
.ecb {
    --bank-primary: #0284c7;
    --bank-secondary: #0ea5e9;
    --bank-accent: #075985;
    --bank-light: #e0f2fe;
    --bank-dark: #1e293b;
}

/* Bank of England - Royal Purple */
.boe {
    --bank-primary: #7c3aed;
    --bank-secondary: #8b5cf6;
    --bank-accent: #5b21b6;
    --bank-light: #f3e8ff;
    --bank-dark: #1e293b;
}

/* Bank of Japan - Rising Sun Red */
.boj {
    --bank-primary: #dc2626;
    --bank-secondary: #ef4444;
    --bank-accent: #991b1b;
    --bank-light: #fef2f2;
    --bank-dark: #1e293b;
}

/* People's Bank of China - Red & Gold */
.pboc {
    --bank-primary: #dc2626;
    --bank-secondary: #fbbf24;
    --bank-accent: #b91c1c;
    --bank-light: #fef2f2;
    --bank-dark: #1e293b;
}

/* Reserve Bank of Australia - Green & Gold */
.rba {
    --bank-primary: #059669;
    --bank-secondary: #fbbf24;
    --bank-accent: #047857;
    --bank-light: #ecfdf5;
    --bank-dark: #1e293b;
}

/* Reserve Bank of India - Saffron Orange */
.rbi {
    --bank-primary: #ea580c;
    --bank-secondary: #f97316;
    --bank-accent: #c2410c;
    --bank-light: #fff7ed;
    --bank-dark: #1e293b;
}

/* Swiss National Bank - Red & White */
.snb {
    --bank-primary: #e10600;
    --bank-secondary: #ef4444;
    --bank-accent: #b91c1c;
    --bank-light: #fff5f5;
    --bank-dark: #1e293b;
}

/* Bank of Canada - Red & White */
.boc {
    --bank-primary: #d32f2f;
    --bank-secondary: #f44336;
    --bank-accent: #9a0000;
    --bank-light: #ffebee;
    --bank-dark: #1e293b;
}

/* ===========================================
   2. STANDARDIZED BANK-SPECIFIC HEADERS
   Use these instead of defining headers in individual pages
   =========================================== */

/* Common header properties */
.header {
    color: white;
    padding: 2rem 0;
    margin-bottom: 0;
}

.header h1 {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.header .lead {
    font-size: 1.125rem;
    opacity: 0.95;
}

/* Federal Reserve Header */
.header.fed,
.header.ecb,
.header.boe,
.header.boj,
.header.pboc,
.header.rba,
.header.rbi,
.header.boc,
.header.canada,
.header.snb {
    background: linear-gradient(135deg, var(--bank-primary) 0%, var(--bank-accent) 100%);
}

/* Bank of Canada Header */
/*
.header.boc,
.header.canada {
    background: linear-gradient(135deg, #d32f2f 0%, #b91c1c 100%);
}
*/


/* ===========================================
   3. CONTENT CARD ACCENT COLORS
   =========================================== */

.fed .content-card {
    border-left: 4px solid var(--bank-secondary);
}

.ecb .content-card,
.boe .content-card,
.boj .content-card,
.pboc .content-card,
.rba .content-card,
.rbi .content-card,
.boc .content-card,
.snb .content-card {
    border-left: 4px solid var(--bank-primary);
}

/* News section specific styling */
.fed .news-section {
    border-left: 4px solid var(--bank-secondary);
}

.ecb .news-section,
.boe .news-section,
.boj .news-section,
.pboc .news-section,
.rba .news-section,
.rbi .news-section,
.boc .news-section,
.snb .news-section {
    border-left: 4px solid var(--bank-primary);
}

/* ===========================================
   4. BUTTON COLOR SCHEMES
   =========================================== */

/* Primary Buttons */
.fed .btn-primary,
.fed .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.fed .btn-primary:hover,
.fed .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.ecb .btn-primary,
.ecb .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.ecb .btn-primary:hover,
.ecb .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.boe .btn-primary,
.boe .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.boe .btn-primary:hover,
.boe .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.boj .btn-primary,
.boj .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.boj .btn-primary:hover,
.boj .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.pboc .btn-primary,
.pboc .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.pboc .btn-primary:hover,
.pboc .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.rba .btn-primary,
.rba .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.rba .btn-primary:hover,
.rba .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.rbi .btn-primary,
.rbi .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.rbi .btn-primary:hover,
.rbi .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.boc .btn-primary,
.boc .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.boc .btn-primary:hover,
.boc .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

.snb .btn-primary,
.snb .btn-back {
    background: var(--bank-primary);
    border-color: var(--bank-primary);
    color: #ffffff;
}

.snb .btn-primary:hover,
.snb .btn-back:hover {
    background: var(--bank-accent);
    border-color: var(--bank-accent);
}

/* ===========================================
   5. STATUS AND BADGE COLORS
   =========================================== */

/* News category badges */
.fed .news-category { background: var(--bank-primary); }
.ecb .news-category { background: var(--bank-primary); }
.boe .news-category { background: var(--bank-primary); }
.boj .news-category { background: var(--bank-primary); }
.pboc .news-category { background: var(--bank-primary); }
.rba .news-category { background: var(--bank-primary); }
.rbi .news-category { background: var(--bank-primary); }
.snb .news-category { background: var(--bank-primary); }
.boc .news-category { background: var(--bank-primary); }

/* Filter buttons active state */
.fed .filter-btn.active { background: var(--bank-secondary); border-color: var(--bank-secondary); }
.ecb .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.boe .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.boj .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.pboc .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.rba .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.rbi .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.boc .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }
.snb .filter-btn.active { background: var(--bank-primary); border-color: var(--bank-primary); }

/* ===========================================
   6. CHART AND VISUALIZATION COLORS
   =========================================== */

/* Chart Color Palettes for Plotly/Chart.js */
.fed {
    --chart-primary: #2563eb;
    --chart-secondary: #059669;
    --chart-accent: #1e40af;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.ecb {
    --chart-primary: #0284c7;
    --chart-secondary: #0ea5e9;
    --chart-accent: #075985;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.boe {
    --chart-primary: #7c3aed;
    --chart-secondary: #8b5cf6;
    --chart-accent: #5b21b6;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.boj {
    --chart-primary: #dc2626;
    --chart-secondary: #ef4444;
    --chart-accent: #991b1b;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.pboc {
    --chart-primary: #dc2626;
    --chart-secondary: #fbbf24;
    --chart-accent: #b91c1c;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.rba {
    --chart-primary: #059669;
    --chart-secondary: #fbbf24;
    --chart-accent: #047857;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.rbi {
    --chart-primary: #ea580c;
    --chart-secondary: #f97316;
    --chart-accent: #c2410c;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.snb {
    --chart-primary: #e10600;
    --chart-secondary: #ef4444;
    --chart-accent: #b91c1c;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

.boc {
    --chart-primary: #d32f2f;
    --chart-secondary: #f44336;
    --chart-accent: #9a0000;
    --chart-success: #10b981;
    --chart-warning: #f59e0b;
    --chart-danger: #ef4444;
}

/* ===========================================
   7. Probability Chart Styles
   =========================================== */

.fed .probability-card.likely { 
    background: linear-gradient(135deg, var(--bank-light) 0%, #ecfdf5 100%); 
    border-color: var(--bank-secondary); 
}

.ecb .probability-card.likely,
.boe .probability-card.likely,
.boj .probability-card.likely,
.pboc .probability-card.likely,
.rba .probability-card.likely,
.rbi .probability-card.likely,
.boc .probability-card.likely,
.snb .probability-card.likely { 
    background: linear-gradient(135deg, var(--bank-light) 0%, #ecfdf5 100%); 
    border-color: var(--bank-primary); 
}

/* Remove flexbox centering for probability chart containers */
#fedProbabilityChart,
#ecbProbabilityChart,
#boeProbabilityChart {
    /* Size and positioning */
    width: 100% !important;
    max-width: 100% !important;
    height: 450px !important;
    
    /* Remove any inherited flexbox behavior */
    display: block !important;
    
    /* Positioning */
    position: relative !important;
    
    /* Ensure chart fits within container */
    overflow: visible !important; /* Changed from hidden to allow Plotly to render properly */
    box-sizing: border-box !important;
    
    /* Remove any padding that might offset the chart */
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure Plotly container takes full height */
#fedProbabilityChart .plotly-graph-div,
#ecbProbabilityChart .plotly-graph-div,
#boeProbabilityChart .plotly-graph-div {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure SVG container aligns to top */
#fedProbabilityChart .svg-container,
#ecbProbabilityChart .svg-container,
#boeProbabilityChart .svg-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Ensure SVG itself is properly sized */
#fedProbabilityChart svg,
#ecbProbabilityChart svg,
#boeProbabilityChart svg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Override parent .chart-container flexbox ONLY for these specific charts */
.content-card .chart-container {
    /* Keep default styles for other charts */
}

/* Special handling when chart is direct child of content-card */
.content-card > #fedProbabilityChart,
.content-card > #ecbProbabilityChart,
.content-card > #boeProbabilityChart {
    /* Remove flex centering inherited from parent */
    align-self: flex-start !important;
}

/* ALTERNATIVE: If charts are wrapped in .chart-container */
.chart-container:has(#fedProbabilityChart),
.chart-container:has(#ecbProbabilityChart),
.chart-container:has(#boeProbabilityChart) {
    /* Override flexbox behavior for containers with these specific charts */
    display: block !important;
    align-items: flex-start !important;
    padding: 0 !important; /* Remove padding that causes offset */
    min-height: 450px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #fedProbabilityChart,
    #ecbProbabilityChart,
    #boeProbabilityChart {
        height: 350px !important;
    }
    
    .chart-container:has(#fedProbabilityChart),
    .chart-container:has(#ecbProbabilityChart),
    .chart-container:has(#boeProbabilityChart) {
        min-height: 350px !important;
    }
}

@media (max-width: 576px) {
    #fedProbabilityChart,
    #ecbProbabilityChart,
    #boeProbabilityChart {
        height: 300px !important;
    }
    
    .chart-container:has(#fedProbabilityChart),
    .chart-container:has(#ecbProbabilityChart),
    .chart-container:has(#boeProbabilityChart) {
        min-height: 300px !important;
    }
}

/* CME FedWatch Link Section - ADD THIS CSS */
.cme-fedwatch-link {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px solid #0066cc;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.cme-fedwatch-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
    border-color: #0052a3;
}

.cme-fedwatch-title {
    font-size: 0.75rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cme-fedwatch-brand {
    font-family: 'Roboto Slab', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0066cc;
    margin-bottom: 0.5rem;
    display: block;
}

.cme-fedwatch-description {
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.cme-fedwatch-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0066cc;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    border: none;
}

.cme-fedwatch-button:hover {
    background: #0052a3;
    color: white;
    transform: scale(1.05);
}

.cme-fedwatch-button i {
    font-size: 1rem;
}

/* CME FedWatch Card - Large version for tab content */
.cme-fedwatch-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 3px solid #0066cc;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 102, 204, 0.15);
    transition: all 0.3s ease;
    min-height: 400px;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
}

.cme-fedwatch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 102, 204, 0.25);
}

.cme-logo-placeholder {
    font-size: 3rem;
    color: #0066cc;
    margin-bottom: 1.5rem;
}

.cme-fedwatch-card h4 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #0066cc;
    margin-bottom: 1rem;
}

.cme-fedwatch-card .subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.cme-fedwatch-card p {
    color: #666;
    margin: 0 0 2rem 0;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cme-fedwatch-card .btn-primary i {
    font-size: 1.3rem;
}

.cme-medium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
    border: 2px solid #3b82f6;
    transition: all 0.3s ease;
}

.cme-medium-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
}

.cme-medium-card .metric-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.cme-medium-card p {
    margin-bottom: 0.75rem;
}

.cme-fedwatch-card .btn-primary,
.cme-medium-card .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cme-fedwatch-card .btn-primary:hover,
.cme-medium-card .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cme-medium-card {
        grid-column: span 1 !important;
        padding: 1rem;
    }
    
    .cme-fedwatch-card {
        padding: 1.5rem;
    }
    
    .cme-fedwatch-card h4 {
        font-size: 1.5rem;
    }
}

#policy-flow-chart {
    /* Overall container styling for spacing and centering */
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
}

#policy-flow-chart h2 {
    color: #2c3e50;
    margin-bottom: 30px;
}

.flow-chart-wrapper {
    /* Key change: Use flexbox and ensure items stretch */
    display: flex;
    justify-content: space-between; /* Spreads items out nicely */
    align-items: stretch; /* *** THIS FORCES ALL FLOW-STEP CHILDREN TO MATCH THE HEIGHT OF THE TALLEST ONE *** */
    flex-wrap: nowrap;
    gap: 15px; /* Added gap for better spacing between boxes and connectors */
}

.flow-step {
    /* Base styling for all blocks */
    flex: 1; /* Allows blocks to grow/shrink equally based on content */
    min-width: 150px;
    padding: 15px 10px;
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Added for equal height: Ensure the content inside aligns nicely */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes the content blocks within the step to the top/bottom */
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.step-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 5px;
}

.flow-step ul {
    /* Styling for the input list - ensures list is aligned nicely within the equal height box */
    list-style-type: none;
    padding-left: 0;
    text-align: left;
    font-size: 0.9em;
    margin-top: 5px; 
}

.flow-step li {
    margin-bottom: 4px;
}

/* --- Step-Specific Styling (Colors) --- */

.foundation {
    background-color: #e7f3ff;
    border-left: 5px solid #3498db;
}
.foundation .step-title { color: #2980b9; }

.inputs {
    background-color: #e9fdf0;
    border-left: 5px solid #2ecc71;
}
.inputs .step-title { color: #27ae60; }

.output {
    background-color: #fff5e6;
    border-left: 5px solid #f39c12;
}
.output .step-title { color: #e67e22; }

.comparison {
    background-color: #fde6e6;
    border-left: 5px solid #e74c3c;
    font-style: italic;
}
.comparison .step-title { color: #c0392b; }


/* --- Connector Arrows --- */

.flow-connector {
    font-size: 2em;
    color: #7f8c8d;
    align-self: center; /* Important for vertical alignment in stretch mode */
}

/* Specific styling for the final arrow (Analysis step) */
.flow-connector:has(+ .comparison) {
    color: #e74c3c;
    font-size: 2.5em;
}

/* --- Callout Box Styling --- */

.callout {
    grid-column: 1 / -1; /* Make it span the full width if you used grid on wrapper, but here we use margins */
    margin-top: 40px;
    padding: 15px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    border-radius: 4px;
    font-size: 1.05em;
    color: #34495e;
}
.callout strong {
    color: #c0392b;
}