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

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

@media (max-width: 767px) {
    .client-layout,
    .client-layout-main,
    .portal-container,
    .service-page-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .client-layout {
        display: block;
        padding: 16px 16px 48px;
    }

    .client-sidebar {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-bottom: 28px;
    }

    .client-sidebar-card {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        overflow: hidden;
    }

    .client-sidebar-nav {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 0 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .client-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .client-sidebar-link {
        flex: 0 0 auto;
        width: auto;
        min-width: max-content;
        padding: 10px 15px;
        white-space: nowrap;
    }

    .dashboard-welcome-refined,
    .page-head,
    .compact-page-head {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .dashboard-welcome-refined > *,
    .page-head > *,
    .compact-page-head > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-welcome-refined h1,
    .page-title,
    .dashboard-welcome-refined p,
    .page-subtitle {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .dashboard-primary-action,
    .page-head form,
    .page-head form button,
    .compact-page-head form,
    .compact-page-head form button {
        width: 100%;
        max-width: 100%;
    }

    .dashboard-metrics {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dashboard-metric-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .dashboard-content-grid,
    .dashboard-content-main,
    .dashboard-card-grid {
        display: grid;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-feature-card,
    .dashboard-action-card,
    .dashboard-domain-card,
    .dashboard-invoice-panel,
    .service-card-list,
    .service-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .service-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
    }

    .service-card > * {
        min-width: 0;
        max-width: 100%;
    }

    .service-card-title strong,
    .service-card-title small,
    .service-price,
    .service-muted {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    img,
    svg,
    video,
    iframe,
    table {
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    .client-layout {
        padding-left: 12px;
        padding-right: 12px;
    }

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