/*
 OHELP MOBILE SCREEN STABILITY
 Preserve existing dashboard design.
 Prevent horizontal document expansion.
*/

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow-x: clip;
}

*, *::before, *::after {
    box-sizing: border-box;
}

@media screen and (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    #root,
    #app,
    .app-shell,
    .dashboard,
    .dashboard-container,
    .dashboard-content,
    main {
        min-width: 0;
        max-width: 100%;
    }

    img,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    svg {
        max-width: 100%;
    }

    input,
    textarea,
    select {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .dashboard-grid,
    .services-grid,
    .quick-actions-grid {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard-grid > *,
    .services-grid > *,
    .quick-actions-grid > * {
        min-width: 0;
        max-width: 100%;
    }

    .search-bar,
    .search-container {
        min-width: 0;
        max-width: 100%;
    }

    .dashboard h1,
    .dashboard h2,
    .dashboard h3,
    .dashboard p {
        overflow-wrap: anywhere;
    }
}