/* Stage 10 operational mobile safeguards. Presentation only. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.admin-content,
.biz-content,
.client-content,
.admin-card,
.biz-card,
.panel,
.booking-row,
.proposal-card {
    min-width: 0;
}

.admin-card,
.biz-card,
.panel,
.booking-row,
.proposal-card {
    overflow-wrap: anywhere;
}

.status-pill {
    flex: 0 1 auto;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}

@media (max-width: 800px) {
    .booking-row {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }

    .booking-row > div {
        min-width: 0;
        flex: 1 1 190px;
    }

    .booking-row .status-pill {
        margin-left: 0;
    }

    .biz-card table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-spacing: 0;
    }

    .biz-card table th,
    .biz-card table td {
        min-width: 110px;
        padding: 11px 10px;
        text-align: left;
        white-space: normal;
    }

    .biz-card table th:first-child,
    .biz-card table td:first-child {
        min-width: 88px;
    }

    .entity-form,
    .admin-form,
    .chat-form {
        min-width: 0;
    }

    .entity-form input,
    .entity-form select,
    .entity-form textarea,
    .admin-form input,
    .admin-form select,
    .admin-form textarea,
    .chat-form input,
    .chat-form textarea {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    button,
    .btn,
    .btn-primary,
    .btn-secondary {
        min-height: 46px;
        touch-action: manipulation;
    }

    .request-actions,
    .proposal-actions,
    .proposal-card > div:last-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: 100%;
    }

    .proposal-card dl {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .modal,
    .modal-overlay,
    .dialog-overlay {
        box-sizing: border-box;
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-content,
    .modal-card,
    dialog {
        box-sizing: border-box;
        width: min(100%, 560px);
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    details,
    summary {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .admin-content,
    .biz-content,
    .client-content {
        box-sizing: border-box;
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .admin-card,
    .biz-card,
    .panel,
    .proposal-card {
        padding: 16px;
    }

    h1,
    h2,
    h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}