/*
 * Section-header card-comparison toggle styles shared by overview.html and
 * scorecard_overview.html. Loaded alongside each page's inline scorecard
 * styles. Mirrors the equivalent rules in scorecard.css so the toggle looks
 * identical across all three pages.
 */

/* Section header row: title (with optional detail-toggle) on the left,
 * comparison toggle stacked on the right. Used by renderVehicleGroup /
 * renderPosGroup in scorecard-renderers.js. */
.sc-group-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.sc-group-header-row .sc-group-header {
    margin-bottom: 0;
}

.sc-card-compare {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-transform: none;
    letter-spacing: normal;
}

.sc-card-compare-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sc-card-compare .sc-compare-lbl {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    color: var(--sc-text-muted, #a1a1aa);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sc-card-compare .sc-compare-context {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--sc-text-muted, #a1a1aa);
    letter-spacing: 0.02em;
    text-transform: none;
}

.sc-compare-toggle {
    display: inline-flex;
    gap: 1px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 2px;
}

.sc-compare-toggle button {
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--sc-text-secondary, #52525b);
    background: transparent;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: normal;
    text-transform: none;
}

.sc-compare-toggle button.active {
    background: var(--sc-surface, #ffffff);
    color: var(--sc-text, #18181b);
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.sc-compare-toggle button:hover:not(.active) {
    color: var(--sc-text, #18181b);
}

/* Constrain spark SVGs to the intended 22px height. Without these rules an
 * SVG with only `viewBox` (no width/height attrs) defaults to 300x150 and
 * overflows the .kpi-sparkline container, painting over the delta footer. */
.kpi-sparkline svg {
    display: block;
    width: 100%;
    height: 22px;
}

/* Delta footer rendered below each KPI tile's sparkline by
 * scorecard-renderers.js / injectGroupSparks. */
.sc-group-kpi-delta {
    margin-top: 0.25rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--sc-text-muted, #a1a1aa);
}

.sc-group-kpi-delta .sc-v9-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sc-group-kpi-delta .sc-v9-delta .vs {
    color: var(--sc-text-muted, #a1a1aa);
    font-weight: 400;
}

.sc-group-kpi-delta .sc-v9-delta.good {
    color: #16a34a;
    font-weight: 600;
}

.sc-group-kpi-delta .sc-v9-delta.bad {
    color: #dc2626;
    font-weight: 600;
}

@media (max-width: 640px) {
    .sc-card-compare {
        align-items: flex-start;
    }
    .sc-card-compare-bar {
        flex-wrap: wrap;
    }
}