/* =========================================================
   BrokerCRM Global Overflow Guard
   Keeps all pages inside mobile viewport while preserving table scrolling.
========================================================= */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

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

.wrapper,
.content-wrapper,
.content,
.content-header,
.container-fluid,
.card,
.card-body,
.card-header,
.modal-content,
.page-hero,
.broker-hero {
  max-width: 100%;
  min-width: 0;
}

.wrapper,
.content-wrapper,
.content,
.container-fluid {
  overflow-x: hidden !important;
}

.row {
  max-width: calc(100% + 16px);
}

.row > [class^="col-"],
.row > [class*=" col-"] {
  min-width: 0;
}

.card-header,
.card-footer,
.page-hero,
.broker-hero,
.hero-actions,
.card-tools,
.input-group,
.form-row {
  min-width: 0;
  max-width: 100%;
}

.card-header {
  flex-wrap: wrap;
}

.card-title,
.page-hero h1,
.page-hero p,
.broker-hero h1,
.broker-hero p,
.form-group,
label,
.small-muted,
.text-muted,
.alert,
.badge,
.btn,
.dropdown-menu,
.modal-title,
.smk-error-msg {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.form-control,
.custom-select,
select,
textarea,
input,
.input-group,
.input-group-prepend,
.input-group-append,
.select2,
.select2-container,
.select2-selection,
.bcrm-date-wrap {
  max-width: 100% !important;
  min-width: 0 !important;
}

.form-control,
.custom-select,
textarea,
input {
  width: 100% !important;
}

.btn {
  white-space: normal !important;
}

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

.table-responsive,
.dataTables_wrapper,
.permission-matrix,
.workflow-strip,
.approval-flow {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.table-responsive > table,
.dataTables_wrapper table.dataTable {
  width: 100% !important;
}

.dataTables_wrapper .row {
  max-width: calc(100% + 16px);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  max-width: 100%;
  min-width: 0;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  max-width: 100%;
  min-width: 0;
}

.dataTables_wrapper .dataTables_filter input {
  max-width: min(100%, 320px) !important;
  min-width: 0 !important;
}

.select2-container--open,
.select2-dropdown {
  max-width: calc(100vw - 16px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.select2-dropdown {
  overflow-x: hidden !important;
}

.select2-search--dropdown,
.select2-results,
.select2-results__options,
.select2-results__option {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.select2-search--dropdown .select2-search__field {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.select2-results__option,
.select2-results__option * {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.swal2-container,
.swal2-popup,
.swal2-html-container,
.swal2-title {
  max-width: 100vw !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 991.98px) {
  .content-wrapper,
  .main-header,
  .main-footer {
    margin-left: 0 !important;
    max-width: 100vw !important;
  }

  .content,
  .content-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 767.98px) {
  html,
  body,
  .wrapper,
  .content-wrapper {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  .content,
  .content-header,
  .container-fluid {
    width: 100%;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow-x: hidden !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
    max-width: calc(100% + 12px);
  }

  .row > [class^="col-"],
  .row > [class*=" col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .card-body,
  .card-header,
  .card-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-hero,
  .broker-hero {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start !important;
    padding: 14px !important;
  }

  .hero-actions,
  .card-tools {
    width: 100%;
    justify-content: flex-start !important;
  }

  .form-control,
  .custom-select,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple {
    font-size: 16px !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-search__field {
    font-size: 16px !important;
  }

  body > .select2-container--open,
  body > span.select2-container--open {
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
  }

  .select2-container--open .select2-dropdown,
  body > .select2-container--open .select2-dropdown,
  body > span.select2-container--open .select2-dropdown {
    width: 100% !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .select2-dropdown--above,
  .select2-dropdown--below {
    left: 0 !important;
    right: auto !important;
  }

  .select2-search--dropdown,
  .select2-results__options {
    width: 100% !important;
    max-width: 100% !important;
  }

  .btn:not(.btn-tool) {
    min-width: 0 !important;
    max-width: 100%;
  }

  .modal-dialog {
    max-width: calc(100vw - 16px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}