/* Shared responsive helpers for tables, forms, and touch targets */

@media (max-width: 991.98px) {
    .app-nav-offcanvas .offcanvas-body {
        overflow-x: hidden;
    }

    .app-nav-offcanvas .navbar-nav {
        width: 100%;
    }

    .app-nav-offcanvas .navbar-nav .nav-link {
        width: 100%;
    }
}

body.nav-offcanvas-open {
    padding-right: 0 !important;
}

@media (max-width: 767.98px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive th,
    .table-responsive td {
        white-space: nowrap;
    }

    .btn-group,
    .btn-toolbar {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .btn-group .btn {
        flex: 1 1 auto;
    }

    form .row {
        row-gap: 0.75rem;
    }

    form .row > [class*="col-"],
    form .form-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    form.d-flex {
        flex-direction: column;
        align-items: stretch;
    }

    form.d-flex > * {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .btn,
    .btn-sm,
    .btn-lg,
    .btn-group .btn,
    .btn-toolbar .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .form-control,
    .form-select {
        min-height: 44px;
    }
}