.mobile-menu-button,
.mobile-menu-overlay {
    display: none;
}

@media (max-width: 1200px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    .dashboard {
        display: block;
        min-height: 100dvh;
    }

    .sidebar {
        position: fixed;
        z-index: 1002;
        inset: 0 auto 0 0;
        width: min(84vw, 340px);
        height: 100dvh;
        padding:
            calc(76px + env(safe-area-inset-top))
            18px
            calc(20px + env(safe-area-inset-bottom));
        display: flex;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-105%);
        transition: transform 180ms ease;
        box-shadow: 18px 0 50px rgba(10, 30, 52, .28);
    }

    body.mobile-menu-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-brand {
        margin-bottom: 24px;
    }

    .sidebar nav {
        display: grid;
        gap: 7px;
    }

    .sidebar .nav-item,
    .sidebar .logout {
        display: block;
        width: 100%;
        min-height: 46px;
        padding: 13px 14px;
        font-size: 16px;
    }

    .sidebar .logout {
        margin-top: 22px;
        flex: none;
    }

    .mobile-menu-button {
        position: fixed;
        z-index: 1003;
        top: calc(12px + env(safe-area-inset-top));
        left: calc(12px + env(safe-area-inset-left));
        width: 48px;
        height: 48px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 14px;
        background: #205089;
        color: #ffffff;
        box-shadow: 0 8px 24px rgba(32, 80, 137, .25);
        font-size: 26px;
        line-height: 1;
    }

    body.mobile-menu-open .mobile-menu-button {
        background: rgba(255, 255, 255, .12);
        box-shadow: none;
    }

    .mobile-menu-overlay {
        position: fixed;
        z-index: 1001;
        inset: 0;
        display: block;
        border: 0;
        background: rgba(10, 30, 52, .55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    body.mobile-menu-open .mobile-menu-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .content {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding:
            calc(78px + env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            calc(32px + env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
    }

    .topbar,
    .topbar-actions,
    .panel-header,
    .actions {
        min-width: 0;
    }

    .panel {
        width: 100%;
        max-width: 100%;
    }

    .table-wrap {
        width: 100%;
        max-width: calc(100vw - 28px);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    dialog {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
}

@media (max-width: 600px) {
    .content {
        padding-top: calc(74px + env(safe-area-inset-top));
    }

    .topbar,
    .topbar-actions,
    .panel-header,
    .actions,
    .mileage-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .summary-grid,
    .summary-grid.four {
        grid-template-columns: 1fr;
    }

    .summary-card {
        padding: 17px;
    }

    .panel-header {
        padding: 18px;
    }

    .mileage-filters label,
    .mileage-filters input,
    .mileage-filters select,
    .mileage-filters button {
        width: 100%;
    }

    dialog form {
        padding: 20px;
    }

    .dialog-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}