/* ── 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;
    }

    #user-name {
        max-width: 90px;
        font-size: 0.85rem;
    }

    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;
    }

    /* Employee rows stay on one line, so their button stays compact
       instead of stretching full-width past the edge of the row. */
    .employee-row {
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }

    .employee-row .employee-name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .employee-row .row-btn {
        width: auto;
        margin-top: 0;
        padding: 0.4rem 0.6rem;
    }

    /* Kebab toggle stays compact instead of stretching full-width —
       it should sit inline next to the timer, not stack as its own row. */
    .row-btn.toggle {
        width: auto;
        margin-top: 0;
        margin-left: auto;
    }
}