body { font-family: system-ui, -apple-system, sans-serif; }

.app-container {
    padding-bottom: 2rem;
}

main {
    min-width: 0;
}

code {
    word-break: break-word;
}

.card-header,
.list-group-item {
    min-width: 0;
}

.card-header .d-flex,
.list-group-item.d-flex {
    min-width: 0;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    h2 {
        font-size: 1.45rem;
    }

    .container {
        max-width: 100%;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .navbar-brand {
        max-width: calc(100vw - 5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .row > .col-auto {
        width: 100%;
    }

    .row > .col-auto .form-control,
    .row > .col-auto .form-select,
    .row > .col-auto .btn,
    .row > .col-auto .btn-group {
        width: 100% !important;
    }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
    }

    .btn-group > .btn {
        flex: 1 1 50%;
    }

    p .btn,
    td .btn,
    .card-body > .btn,
    .card-body form .btn {
        margin-bottom: .35rem;
    }

    main table.table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    main table.table th,
    main table.table td {
        vertical-align: middle;
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
}