/* Backoffice mobile responsiveness helpers */
@media (max-width: 767.98px) {
    /* Full-width CTA/button for stacked mobile layouts */
    .btn-mobile-full {
        width: 100%;
    }

    /*
     * Touch target sizing for important actions only.
     * Do not apply globally to every .btn to avoid layout regressions.
     */
    .btn-mobile-touch {
        min-height: 44px;
    }

    /* Prevent iOS Safari input auto-zoom on focus */
    .form-control,
    .form-select {
        font-size: 16px;
    }

    /* Keep compact action groups from wrapping awkwardly */
    .table-action-btn {
        white-space: nowrap;
    }

    /*
     * Generic chip-style tabs for list/detail pages.
     * Keep a single row with horizontal scrolling on narrow screens.
     */
    .mobile-chip-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .mobile-chip-tabs::-webkit-scrollbar {
        display: none;
    }

    .mobile-chip-tabs .nav-item {
        margin-right: 0 !important;
        flex: 0 0 auto;
    }

    .mobile-chip-tabs .btn,
    .mobile-chip-tabs .nav-link {
        white-space: nowrap;
    }

    /*
     * Status filter tabs (used by list pages with count badges).
     * Keep tabs balanced in two columns instead of awkward wrapping.
     */
    .status-filter-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .status-filter-tabs .nav-item {
        margin-right: 0 !important;
    }

    .status-filter-tabs .status-filter-btn {
        width: 100%;
        min-height: 44px;
        padding: 0.45rem 0.55rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        font-size: 0.86rem;
        white-space: nowrap;
    }

    .status-filter-tabs .status-filter-btn i {
        margin-right: 0 !important;
    }

    .status-filter-tabs .status-filter-btn .badge {
        margin-left: 0.25rem !important;
        min-width: 1.45rem;
        padding: 0.22rem 0.38rem;
        font-size: 0.74rem;
        line-height: 1.1;
    }
}