/* ── Mobile: rows wrap to two lines ── */
@media (max-width: 600px) {
    /* ── Header ── */
    header {
        padding: 0.6rem 0.75rem;
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Push the nav to its own second line, full width */
    #app-nav {
        order: 3;
        width: 100%;
    }

    .header-logo {
        max-width: 110px;
    }

    .nav-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.8rem;
    }

    header button#logout-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    /* ── Rental rows ── */
    .rental-row {
        flex-wrap: wrap;
    }

    /* ── Vehicle rows ── */
    .vehicle-row {
        flex-wrap: wrap;
    }

    .spacer {
        display: none;
    }

    .row-btn {
        width: 100%;
        margin-top: 0.4rem;
        text-align: center;
    }
}