/*
 * Compact-desktop bottom-panel header
 *
 * Keep vehicle identity, tabs, and controls on one line below 1280px. Each
 * section gives up width progressively so the tab row does not drop below the
 * vehicle name. Phone layout at 768px and below remains unchanged.
 *
 * Rollback: apply COMPACT_BOTTOM_HEADER_ROLLBACK.patch from the repository root.
 */
@media (min-width: 769px) and (max-width: 1279px) {
    .bp-header {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(
            calc(2px * var(--ui-scale)),
            0.35vw,
            calc(5px * var(--ui-scale))
        );
        min-width: 0;
        padding: calc(4px * var(--ui-scale)) calc(6px * var(--ui-scale));
    }

    .bp-vehicle-identity {
        grid-area: auto;
        flex: 0 1 clamp(
            calc(86px * var(--ui-scale)),
            10vw,
            calc(155px * var(--ui-scale))
        );
        max-width: clamp(
            calc(86px * var(--ui-scale)),
            10vw,
            calc(155px * var(--ui-scale))
        );
        min-width: calc(58px * var(--ui-scale));
        gap: clamp(
            calc(3px * var(--ui-scale)),
            0.35vw,
            calc(6px * var(--ui-scale))
        );
    }

    .bp-status-dot {
        width: calc(8px * var(--ui-scale));
        height: calc(8px * var(--ui-scale));
    }

    .bp-vehicle-name {
        max-width: 100%;
        min-width: 0;
        font-size: clamp(
            calc(8px * var(--ui-scale)),
            0.7vw,
            calc(10px * var(--ui-scale))
        );
    }

    .bp-tabs {
        grid-area: auto;
        width: auto;
        min-width: 0;
        flex: 1 1 0;
        gap: calc(1px * var(--ui-scale));
        padding: calc(2px * var(--ui-scale));
        overflow: hidden;
    }

    .bp-tab {
        min-width: 0;
        flex: 1 1 0;
        justify-content: center;
        gap: clamp(
            calc(1px * var(--ui-scale)),
            0.2vw,
            calc(3px * var(--ui-scale))
        );
        padding-block: calc(4px * var(--ui-scale));
        padding-inline: clamp(
            calc(2px * var(--ui-scale)),
            0.25vw,
            calc(4px * var(--ui-scale))
        );
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(
            calc(7.25px * var(--ui-scale)),
            0.6vw,
            calc(9px * var(--ui-scale))
        );
    }

    .bp-tab .tab-icon {
        flex: 0 0 auto;
        font-size: clamp(
            calc(9px * var(--ui-scale)),
            0.75vw,
            calc(11px * var(--ui-scale))
        );
    }

    .bp-tab .bp-badge {
        flex: 0 0 auto;
        padding-inline: calc(3px * var(--ui-scale));
        font-size: calc(8px * var(--ui-scale));
    }

    .bp-controls {
        grid-area: auto;
        flex: 0 0 auto;
        gap: calc(2px * var(--ui-scale));
    }

    .bp-ctrl-btn {
        width: clamp(
            calc(22px * var(--ui-scale)),
            2.1vw,
            calc(28px * var(--ui-scale))
        );
        height: clamp(
            calc(22px * var(--ui-scale)),
            2.1vw,
            calc(28px * var(--ui-scale))
        );
        font-size: clamp(
            calc(9px * var(--ui-scale)),
            0.85vw,
            calc(11px * var(--ui-scale))
        );
    }
}