/* Phones (portrait): side-by-side columns stack so every page reads properly.
   Landscape phones, tablets and laptops (768px and wider) keep the normal layout.
   Add class "keep-cols" to a row that must stay side by side. */
@media (max-width: 767.98px) {
    .row:not(.keep-cols) > .col-1, .row:not(.keep-cols) > .col-2, .row:not(.keep-cols) > .col-3,
    .row:not(.keep-cols) > .col-4, .row:not(.keep-cols) > .col-5, .row:not(.keep-cols) > .col-6,
    .row:not(.keep-cols) > .col-7, .row:not(.keep-cols) > .col-8, .row:not(.keep-cols) > .col-9,
    .row:not(.keep-cols) > .col-10, .row:not(.keep-cols) > .col-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: .5rem;
    }

    /* boxes size to their own content once stacked, so they never spill over the text below
       (on wider screens "h-100" makes side-by-side boxes the same height; stacked, it makes them overflow) */
    .row:not(.keep-cols) .h-100 { height: auto !important; }
    .row:not(.keep-cols) > [class*="col"] { height: auto !important; }

    /* empty spacer columns take no room */
    .row:not(.keep-cols) > .col-1:empty { display: none; }

    /* wide tables scroll sideways instead of squashing */
    table.table { display: block; overflow-x: auto; white-space: nowrap; }

    /* the top menu wraps instead of running off the screen */
    .top-nav-bar { flex-wrap: wrap; gap: .25rem; }
    .top-nav-bar > .d-flex { flex-wrap: wrap; gap: .25rem; }
    .top-nav-bar .btn span { font-size: .8rem; }

    /* comfortable side padding and headings on small screens */
    .full-page-container { padding-left: 12px !important; padding-right: 12px !important; }
    h1 { font-size: 1.6rem; }
    .modal-dialog { margin: .5rem; }
}