/* Shared mobile responsiveness helpers */

/* Horizontal scrolling */
.dfm-hscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    scrollbar-width: thin;
}

/* Overflow containment */
.dfm-no-x-overflow {
    overflow-x: hidden;
    max-width: 100%;
}

/* Safe area helpers */
.dfm-safe-bottom {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

@media (max-width: 767px) {
    /* Layout helpers */
    .dfm-mobile-stack {
        display: flex;
        flex-direction: column;
    }

    .dfm-mobile-stack > * {
        width: 100% !important;
    }

    .dfm-toolbar-wrap {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dfm-bottom-tab-offset {
        padding-bottom: 72px;
    }

    /* Touch targets */
    .dfm-touch {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    :where(.mud-button-root, .mud-icon-button, .mud-tab, .mud-input-control .mud-input, .mud-chip) {
        min-height: 44px;
    }

    :where(.mud-icon-button) {
        min-width: 44px;
    }

    /* Card headers: prevent wide status chips / actions from forcing the card
       wider than the viewport (which caused staggered, misaligned cards). */
    .mud-card-header {
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }

    .mud-card-header .mud-card-header-content {
        min-width: 0;
        flex: 1 1 auto;
    }

    .mud-card-header .mud-card-header-actions {
        margin-left: auto;
    }

    /* Allow long status chips to wrap their text instead of overflowing. */
    .mud-card-header .mud-chip {
        height: auto;
        min-height: 32px;
        max-width: 100%;
        white-space: normal;
    }

    /* Keep cards and their content within the viewport width. */
    .mud-card,
    .mud-card-content {
        min-width: 0;
        max-width: 100%;
    }
}