/* Served automatically by Dash from the assets/ folder. */

body {
    margin: 0;
    background: #fff;
}

.app {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 1400px;
    margin: 0 auto;
}

.app-title {
    text-align: center;
    color: #00539F;
    padding: 20px;
    margin: 0;
    font-size: 2rem;
}

/* Tabs: one horizontally scrollable row at every width, instead of the
   vertical stack dcc.Tabs switches to on small screens. */
.tabs-bar {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-bottom: 20px;
}

.tabs-bar .tab {
    flex: 1 0 auto !important;
    width: auto !important;
    white-space: nowrap;
    padding: 12px 16px !important;
}

.tab-content {
    padding: 0 20px 20px 20px;
}

.no-data {
    text-align: center;
    padding: 40px;
    color: #888;
}

/* KPI cards wrap onto multiple lines rather than squeezing. */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    flex: 1 1 200px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.kpi-card h4 {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.kpi-card h2 {
    margin: 5px 0;
    color: #00539F;
}

.kpi-card p {
    margin: 0;
    color: #999;
    font-size: 12px;
}

/* Side-by-side charts stack once each would be narrower than ~450px. */
.chart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.chart-row > * {
    flex: 1 1 450px;
    min-width: 0;
}

.chart {
    margin-bottom: 16px;
}

.chart-title {
    margin: 16px 0 0 0;
    font-size: 17px;
    font-weight: 500;
    color: #2a3f5f;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-bar .dash-dropdown {
    width: 200px;
}

.note {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .app-title {
        font-size: 1.25rem;
        padding: 12px;
    }

    .tab-content {
        padding: 0 12px 12px 12px;
    }

    .kpi-row {
        gap: 8px;
    }

    .kpi-card {
        flex-basis: 140px;
        padding: 12px;
    }

    .kpi-card h2 {
        font-size: 1.3rem;
    }

    /* Charts are view-only on phones; the toolbar overlaps titles. */
    .modebar-container {
        display: none;
    }
}

/* Markdown tables (About page) scroll within themselves instead of
   widening the page. */
.tab-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}