/* Styles for `alliance_economy.html`, loaded after `app.css` so the shared tokens and
 * components are already in scope. Rules written the same way in three or
 * more pages belong in `app.css` instead: `tests/test_shared_styles.py`
 * fails when one is copied that far.
 */
.eco-page {
    padding: 22px 22px 30px;
    max-width: 1400px;
    margin: 0 auto;
}
.eco-header {
    text-align: center;
    margin-bottom: 18px;
}
.eco-header h1 {
    font-size: 1.8rem;
    color: #e4e8ef;
    margin: 0 0 6px;
}
body.light-mode .eco-header h1 { color: #111827; }
.eco-header p {
    color: #9aa2af;
    margin: 0;
    font-size: 0.95rem;
}
body.light-mode .eco-header p { color: #4b5563; }

.eco-info-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    padding: 8px 14px;
    font-size: 0.8rem;
    color: #9aa2af;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
body.light-mode .eco-info-bar { background: #fff; border-color: #d7dce6; }
.eco-stale-badge {
    color: #f4a261;
    font-weight: 600;
}
.eco-info-accent {
    color: #d4a54a;
    font-weight: 600;
}

.eco-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.eco-tab-btn {
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    color: #aeb5c1;
    padding: 7px 18px;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eco-tab-btn:hover { background: #181c24; color: #e4e8ef; }
.eco-tab-btn.active { background: #181c24; color: #d4a54a; border-color: #d4a54a; }
body.light-mode .eco-tab-btn { background: #fff; border-color: #d7dce6; color: #4b5563; }
body.light-mode .eco-tab-btn:hover { background: #f3f4f6; color: #111827; }
body.light-mode .eco-tab-btn.active { background: #eef2ff; color: #4338ca; border-color: #4338ca; }

.eco-chart-wrap {
    display: none;
    background: #12151b;
    border: 1px solid #252a35;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.eco-chart-wrap.active { display: block; }
body.light-mode .eco-chart-wrap { background: #fff; border-color: #d7dce6; }

.eco-chart-loading {
    text-align: center;
    padding: 60px 20px;
    color: #9aa2af;
    font-size: 0.9rem;
}

.eco-svg-wrap {
    width: 100%;
    overflow-x: auto;
}
svg.eco-svg {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
}

.eco-tooltip {
    position: fixed;
    background: #181c24;
    border: 1px solid #252a35;
    border-radius: 2px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: #d6d9e0;
    pointer-events: none;
    z-index: 1000;
    display: none;
    max-width: 240px;
    line-height: 1.6;
}
body.light-mode .eco-tooltip { background: #fff; border-color: #d7dce6; color: #1f2937; }
.eco-tooltip strong { color: #d4a54a; }
body.light-mode .eco-tooltip strong { color: #4338ca; }

.eco-empty-msg {
    text-align: center;
    padding: 60px 20px;
    color: #9aa2af;
}
.eco-empty-msg strong { color: #d4a54a; }
body.light-mode .eco-empty-msg strong { color: #4338ca; }

.eco-snapshot-select {
    background: #181c24;
    border: 1px solid #252a35;
    border-radius: 2px;
    color: #d6d9e0;
    padding: 3px 8px;
    font-size: 0.8rem;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    cursor: pointer;
}
body.light-mode .eco-snapshot-select {
    background: #f9fafb;
    border-color: #d7dce6;
    color: #1f2937;
}

.eco-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 10px 16px 0;
    font-size: 0.75rem;
    color: #9aa2af;
}
.eco-timeline-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.eco-timeline-legend-swatch {
    width: 22px;
    height: 3px;
    border-radius: 2px;
}

.eco-pyramid-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 0.82rem;
    color: #9aa2af;
    border-bottom: 1px solid #252a35;
}
body.light-mode .eco-pyramid-controls { border-color: #d7dce6; }