/* ---------- Phone width ---------- */

@media (max-width: 640px) {
    /* Navigation goes above the content instead of beside it. */
    .app-main {
        flex-direction: column !important;
    }

    .app-nav {
        width: 100% !important;
        border-right: none;
        border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    }

    .app-body {
        padding: 16px;
    }

    .app-header .user-name {
        display: none;
    }

    .recovery-codes {
        columns: 1;
    }

    .package-table th:nth-child(3),
    .package-table td:nth-child(3),
    .package-table th:nth-child(4),
    .package-table td:nth-child(4),
    .package-table th:nth-child(6),
    .package-table td:nth-child(6) {
        display: none;
    }

    .komod-search {
        min-width: 0;
        width: 100%;
    }
}