/*
|--------------------------------------------------------------------------
| Global Responsive Containment
|--------------------------------------------------------------------------
| Keeps long API responses, URLs, tokens, JSON strings, tables, cards,
| alerts, and embedded media inside the visible viewport across the frontend,
| user panel, admin panel, and basic system pages.
*/

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

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

body {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

img,
svg,
video,
canvas,
iframe,
object,
embed {
    max-width: 100%;
}

img,
video,
canvas,
iframe {
    height: auto;
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row,
[class^="col-"],
[class*=" col-"],
.card,
.card-body,
.alert,
.modal,
.modal-dialog,
.modal-content,
.dropdown-menu,
.list-group,
.list-group-item,
.table-responsive,
.input-group,
.admin-main,
.admin-main-inner,
.admin-content,
.userpanel-main,
.userpanel-content,
.frontend-default-main,
.modern-main,
.sms-panel,
.sms-record-card,
.sms-provider-card,
.sms-feature-card,
.sms-stat-card,
.sms-readiness-card,
.sms-copy-grid,
.sms-wizard-grid,
.ec-panel,
.eii-panel,
.settings-panel,
.roles-panel,
.permissions-panel,
.users-panel {
    min-width: 0;
    max-width: 100%;
}

.d-flex,
.row,
.sms-actions,
.sms-actions-row,
.input-group,
.alert,
.card,
.card-body,
.modal-body,
.modal-footer,
.dropdown-menu,
.list-group-item {
    min-width: 0;
}

.d-flex > *,
.row > *,
.sms-actions > *,
.sms-actions-row > *,
.input-group > *,
.alert > *,
.card > *,
.card-body > *,
.modal-body > *,
.modal-footer > *,
.dropdown-menu > *,
.list-group-item > * {
    min-width: 0;
}

p,
li,
dd,
dt,
blockquote,
label,
legend,
small,
span,
strong,
em,
b,
a,
button,
.badge,
.btn,
.alert,
.alert div,
.alert p,
.alert span,
.toast,
.toast-body,
.dropdown-item,
.form-text,
.form-label,
.table,
.table td,
.table th,
.sms-meta span,
.sms-pill,
.sms-code,
.sms-secret-masked,
.sms-code-field,
.sms-pre,
.ec-code,
.ec-pre,
.eii-code,
.eii-pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

a,
.btn,
.badge,
.dropdown-item,
.nav-link,
.sidebar-link,
.admin-menu-link,
.admin-menu-toggle,
.shortcut-link {
    max-width: 100%;
}

pre,
code,
kbd,
samp,
textarea,
.sms-pre,
.sms-code,
.sms-code-field,
.sms-secret-masked,
.ec-pre,
.ec-code,
.eii-pre,
.eii-code,
.json-preview,
.api-response,
.webhook-payload,
.provider-response,
.audit-payload {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
}

pre,
.sms-pre,
.ec-pre,
.eii-pre,
.json-preview,
.api-response,
.webhook-payload,
.provider-response,
.audit-payload {
    overflow-x: auto;
}

textarea,
input,
select,
.form-control,
.form-select {
    max-width: 100%;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

td,
th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.alert {
    max-width: 100%;
    overflow: hidden;
}

.alert.d-flex,
.sms-flash-alert {
    align-items: flex-start;
}

.alert.d-flex > div,
.sms-flash-alert > div {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.modal-dialog {
    width: min(100% - 1rem, var(--bs-modal-width, 500px));
    margin-left: auto;
    margin-right: auto;
}

.offcanvas,
.offcanvas-body,
.sidebar,
.admin-sidebar,
.userpanel-sidebar {
    max-width: 100vw;
}

@media (max-width: 767.98px) {
    .btn,
    .input-group,
    .input-group .btn,
    .input-group .form-control,
    .input-group .form-select {
        min-width: 0;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1rem);
    }

    .table,
    table {
        font-size: .92rem;
    }
}

/* Critical final guard for pages that load additional module CSS after the header. */
html,
body {
    overflow-x: hidden !important;
}

.alert,
.alert *,
.sms-flash-alert,
.sms-flash-alert *,
pre,
pre *,
code,
.sms-pre,
.sms-code,
.sms-code-field,
.ec-pre,
.ec-code,
.eii-pre,
.eii-code {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

pre,
.sms-pre,
.ec-pre,
.eii-pre,
.json-preview,
.api-response,
.webhook-payload,
.provider-response,
.audit-payload {
    white-space: pre-wrap !important;
    max-width: 100% !important;
}

@media (max-width: 767.98px) {
    .card,
    .card-body,
    .alert,
    .sms-panel,
    .sms-record-card,
    .sms-provider-card,
    .sms-feature-card,
    .sms-stat-card,
    .ec-panel,
    .eii-panel,
    .settings-panel,
    .roles-panel,
    .permissions-panel,
    .users-panel,
    .table-responsive {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}