/* Keep desktop Bootstrap layout; adapt the administration forms for touch. */
@media (max-width: 767.98px) {
    body > .container {
        margin-top: 20px;
        padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    }
    h1 { font-size: 1.65rem; }
    #adminTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    #adminTabs .nav-link { white-space: nowrap; min-height: 44px; }
    #adminTabsContent .card-body { padding: 16px; }
    #adminTabsContent .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 12px;
    }
    #adminTabsContent .d-flex > * { min-width: 0; }
    #adminTabsContent .list-group-item { overflow-wrap: anywhere; }
    #adminTabsContent .list-group-item.p-4 { padding: 16px !important; }
    #users-pane .card-body > .d-flex,
    #resources-pane .card-body > .d-flex,
    #voices-pane .card-body > .d-flex {
        align-items: stretch !important;
        flex-direction: column;
    }
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .input-group > .form-control { min-width: 0; }
    .btn:not(.btn-close) { min-height: 44px; }
    #teachers-pane .row > .col-sm-6,
    #teachers-pane .row > .col-sm-auto { width: 100%; }
    #teachers-pane .col-sm-auto > .btn { width: 100%; }
    #teacher-result, #teacher-list-area, #inviteResult, #resultsArea {
        overflow-wrap: anywhere;
    }
    .modal-dialog {
        margin: 12px;
        max-width: calc(100% - 24px);
    }
    .modal-content {
        max-height: calc(100dvh - 24px);
    }
    .modal-body {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding: 16px;
    }
    .modal-header, .modal-footer { flex-shrink: 0; padding: 16px; }
    .modal-title { font-size: 1.1rem; }
    .modal-header .btn-close { padding: 14px; }
    .modal-footer { gap: 8px; }
    .modal-footer > .btn { flex: 1 1 120px; margin: 0; }
    #inviteModal .modal-footer > .btn { flex-basis: 100%; }
    #inviteKeyDisplay { overflow-wrap: anywhere; }
    #inviteResult .input-group > .btn { min-width: 48px; }
    .modal img, #teacher-result img { max-width: 100%; height: auto; }
    .toast-container { max-width: 100vw; }
}