:root {
    --app-bg: #f4f7fb;
}

[data-bs-theme="dark"] {
    --app-bg: #10141c;
}

body {
    background: var(--app-bg);
    min-height: 100vh;
}

.metric-card {
    position: relative;
    height: 100%;
    min-height: 128px;
    padding: 1.25rem;
    overflow: hidden;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 1rem;
    box-shadow: 0 .25rem 1rem rgba(20, 32, 50, .05);
}

.metric-card span:first-child {
    display: block;
    margin-bottom: .55rem;
    color: var(--bs-secondary-color);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.metric-card strong {
    display: block;
    max-width: calc(100% - 2.5rem);
    font-size: 1.75rem;
    line-height: 1.15;
}

.metric-card .metric-time {
    font-size: 1.2rem;
}

.metric-card > i {
    position: absolute;
    right: 1.15rem;
    bottom: 1rem;
    font-size: 2rem;
    opacity: .28;
}

.table th {
    padding: .8rem 1rem;
    color: var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.table td {
    padding: .9rem 1rem;
    white-space: nowrap;
}

.chart-card {
    min-height: 310px;
}

.chart-wrap {
    position: relative;
    height: 245px;
}

@media (max-width: 575.98px) {
    .metric-card { min-height: 116px; padding: 1rem; }
    .metric-card strong { font-size: 1.4rem; }
    .metric-card .metric-time { font-size: 1rem; }
}