/* Mobile containment for every portal dashboard component. */
.sp-dashboard,
.sp-dashboard *,
.sp-shell,
.sp-shell * {
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .sp-request-fold > summary {
        align-items: flex-start;
    }
    .sp-request-summary-counts {
        align-items: flex-end;
        flex-direction: column;
        gap: 3px;
    }
    .sp-request-tools {
        grid-template-columns: 1fr;
        padding: 15px;
    }
    .sp-request-client > summary {
        align-items: flex-start;
        flex-wrap: wrap;
        padding-right: 46px;
    }
    .sp-request-client-person {
        flex: 1 1 220px;
    }
    .sp-intake-status {
        margin-left: 61px;
        white-space: normal;
    }
}

.sp-dashboard > *,
.sp-grid > *,
.sp-client-row > *,
.sp-form-grid > * {
    min-width: 0;
    max-width: 100%;
}

.sp-dashboard img,
.sp-shell img,
.sp-dashboard svg,
.sp-shell svg {
    max-width: 100%;
}

.sp-profile-editor {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--sp-line);
}

.sp-profile-preview {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sp-profile-preview img {
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    border-radius: 50%;
    object-fit: cover;
    background: #e7ebef;
}

.sp-profile-preview strong {
    display: block;
    font: 700 24px/1.1 Manrope, Arial, sans-serif;
}

.sp-profile-preview p {
    max-width: 600px;
    margin: 8px 0 0;
    color: var(--sp-muted);
}

.sp-profile-editor .sp-form {
    max-width: 760px;
}

@media (max-width: 700px) {
    .sp-shell,
    .sp-dashboard {
        width: calc(100% - 24px);
        max-width: calc(100% - 24px);
        margin-right: auto;
        margin-left: auto;
        overflow: visible;
    }

    .sp-account-head,
    .sp-grid,
    .sp-card,
    .sp-coach-section,
    .sp-progress,
    .sp-training-history,
    .sp-chat,
    .sp-management-inbox,
    .sp-client-list,
    .sp-client-row,
    .sp-owner-client-list,
    .sp-owner-client-list > details {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .sp-dashboard-nav {
        width: 100%;
        max-width: 100%;
        padding: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sp-dashboard-nav a {
        padding: 9px 11px;
        white-space: nowrap;
    }

    .sp-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-card,
    .sp-form,
    #loginform {
        min-width: 0;
        padding: 20px;
    }

    .sp-card:first-child,
    .sp-resource-library {
        grid-column: auto;
    }

    .sp-card h2 {
        margin-top: 28px;
    }

    .sp-details,
    .sp-resource-list > div,
    .sp-application-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-resource-list > div .sp-link,
    .sp-application-actions .sp-button {
        width: 100%;
    }

    .sp-client-row,
    .sp-form-grid,
    .sp-question,
    .sp-measure-guide,
    .sp-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-question > span,
    .sp-question textarea,
    .sp-client-row > div:first-child {
        grid-column: auto;
    }

    .sp-session-table,
    .sp-exercise-editor {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sp-form input,
    .sp-form select,
    .sp-form textarea,
    .sp-chat-form textarea,
    .sp-roster-search {
        max-width: 100%;
        min-width: 0;
    }

    .sp-profile-card {
        width: 100%;
    }

    .sp-profile-editor {
        padding: 20px;
    }

    .sp-profile-preview {
        align-items: flex-start;
        flex-direction: column;
    }

    .sp-profile-preview img {
        width: 96px;
        height: 96px;
        flex-basis: 96px;
    }

    .sp-account-head h1,
    .sp-intro h1 {
        overflow-wrap: anywhere;
    }
}