/* =============================================================================
   Global responsive modal layer
   -----------------------------------------------------------------------------
   Loaded LAST on every admin page and every customers-area page (registered on
   the `before_compile_css_assets` hook in application/helpers/assets_helper.php)
   so it can normalise modal behaviour after the per-page `admin-*.css` files.

   Rules of engagement:
     * Desktop (>= 992px) layout is intentionally left alone. Only overflow
       safety rules that cannot change an existing layout are applied globally.
     * Tablet (768-991px) keeps the current modal proportions but can no longer
       exceed the viewport, and scrolls inside the body instead of the page.
     * Phone (<= 767px) tightens spacing, prevents iOS focus zoom and stacks the
       footer actions.

   Geometry vs. behaviour
   ----------------------
   Three modal families already ship their own responsive geometry - they take
   themselves out of the document flow with `position: fixed` and centre with a
   transform: .customer-create-modal, .task-create-modal and .lead-modal.
   Feeding them a `width: auto` or a `margin` would shift or collapse them, so
   every width/max-width/margin rule below is guarded with

       .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal)

   They still inherit the height cap and the internal scrolling chain, which is
   what they were missing.

   Note on specificity: the guard adds four class-level tokens, so a narrower
   breakpoint that needs to win must repeat the same selector shape rather than a
   shorter one. That is why the phone and small-phone blocks restate the full
   selector list instead of relying on `.modal > .modal-dialog`.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Overflow safety - all breakpoints, layout neutral
   -------------------------------------------------------------------------- */

.modal-title,
.modal-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.modal-content img,
.modal-content video,
.modal-content iframe,
.modal-content embed,
.modal-content object {
  max-width: 100%;
}

.modal-content img {
  height: auto;
}

.modal-body pre,
.modal-body code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Bootstrap adds a 1px border to .table-responsive that doubles up inside a
   modal body which already has its own edges. */
.modal-body .table-responsive {
  border: 0;
}

/* Keep floated helpers (checkboxes, hints) on the left once the footer becomes
   a flex container further down. */
.modal-footer > .pull-left {
  margin-right: auto;
}

[dir="rtl"] .modal-footer > .pull-left {
  margin-right: 0;
  margin-left: auto;
}

/* -----------------------------------------------------------------------------
   2. Tablet and below - fit the viewport, scroll inside the body
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  /* 2a. Dialog widths.
         Default dialogs keep the Bootstrap 600px cap so the tablet look is
         unchanged; large variants go full width minus the gutter. Either way
         they can no longer be wider than the screen. */
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog:not(.full-screen-modal):not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-xxl) {
    width: auto !important;
    max-width: 600px !important;
    margin: 16px auto !important;
  }

  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-lg:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xl:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xxl:not(.full-screen-modal) {
    width: auto !important;
    max-width: none !important;
    margin: 16px !important;
  }

  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-sm:not(.full-screen-modal) {
    width: auto !important;
    max-width: 300px !important;
    margin: 16px auto !important;
  }

  /* 2b. Height cap - applied to every family, including the fixed ones. */
  .modal > .modal-dialog {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }

  /* 2c. Internal scrolling chain.
         Modal markup in this project comes in four shapes:
           .modal-dialog > .modal-content
           .modal-dialog > form > .modal-content
           .modal-content > .modal-header / .modal-body / .modal-footer
           .modal-content > form > .modal-header / .modal-body / .modal-footer
         Making every wrapper a column flex container with min-height: 0 lets the
         height cap above propagate down, so the header and footer stay put and
         only .modal-body scrolls. */
  .modal > .modal-dialog {
    display: flex;
    flex-direction: column;
  }

  .modal > .modal-dialog > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    margin: 0;
  }

  .modal > .modal-dialog:not(.full-screen-modal) > .modal-content,
  .modal > .modal-dialog:not(.full-screen-modal) > form > .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .modal .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }

  .modal .modal-content > .modal-header,
  .modal .modal-content > form > .modal-header,
  .modal .modal-content > .modal-footer,
  .modal .modal-content > form > .modal-footer {
    flex: 0 0 auto;
  }

  .modal .modal-content > .modal-body,
  .modal .modal-content > form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* 2d. Full screen modals become a normal capped dialog - the absolutely
         positioned footer has nowhere to sit on a small screen. */
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.full-screen-modal {
    position: relative;
    width: auto !important;
    max-width: none !important;
    height: auto;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 16px !important;
    display: flex;
    flex-direction: column;
  }

  .full-screen-modal > .modal-content,
  .full-screen-modal > form > .modal-content {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .full-screen-modal .modal-footer,
  .full-screen-modal .modal-footer:not(.modal-not-full-width) {
    position: relative !important;
    bottom: auto;
    width: auto;
  }

  .full-screen-modal .modal-footer:not(.modal-not-full-width):after {
    content: none;
  }

  /* 2e. The single task modal is a two column layout that stacks at col-md. */
  .task-single-col-left {
    min-height: 0;
    padding: 20px;
  }

  .task-single-col-right {
    border-left: 0;
    border-top: 1px solid #e5e7eb;
    border-radius: 0;
  }

  .task-single-col-right .task-menu-options {
    position: static;
    margin-top: 0;
    right: auto;
  }

  /* 2f. Wide content inside a modal body scrolls on its own axis instead of
         stretching the dialog. */
  .modal-body .dataTables_wrapper {
    overflow-x: auto;
  }

  .modal-body table.table {
    max-width: 100%;
  }

  /* Keep select menus short enough to stay inside the scrollable body. */
  .modal-body .bootstrap-select .dropdown-menu {
    max-height: 45vh !important;
  }

  .modal-body .bootstrap-select .dropdown-menu .inner {
    max-height: 40vh !important;
  }

  /* Fixed width / fixed height helpers that overflow a narrow dialog. */
  .modal-body .preview_image,
  .modal-content .preview_image {
    width: 100%;
    max-width: 250px;
  }

  .modal-body .project_file_area,
  .modal-body .project_file_discusssions_area {
    height: auto;
  }
}

/* -----------------------------------------------------------------------------
   3. Phone
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Full bleed minus a 10px gutter, matching the Bootstrap phone default.
     Selector shape mirrors 2a so it wins on equal specificity. */
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog:not(.full-screen-modal):not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-xxl),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-lg:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xl:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xxl:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.full-screen-modal {
    width: auto !important;
    max-width: none !important;
    margin: 10px !important;
  }

  .modal > .modal-dialog {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }

  /* Spacing - the desktop 20-24px paddings eat too much of a 360px screen. */
  .modal .modal-content > .modal-header,
  .modal .modal-content > form > .modal-header {
    padding: 14px 16px !important;
  }

  .modal .modal-content > .modal-body,
  .modal .modal-content > form > .modal-body {
    padding: 16px !important;
  }

  .modal .modal-content > .modal-footer,
  .modal .modal-content > form > .modal-footer {
    padding: 12px 16px !important;
  }

  /* Long titles wrap beside the floated close button instead of under it. */
  .modal .modal-title,
  .modal .modal-header > h4 {
    font-size: 16px;
    line-height: 1.35;
    padding-right: 34px;
  }

  [dir="rtl"] .modal .modal-title,
  [dir="rtl"] .modal .modal-header > h4 {
    padding-right: 0;
    padding-left: 34px;
  }

  /* Comfortable tap target for the dismiss button. */
  .modal .modal-header .close {
    min-width: 32px;
    min-height: 32px;
    line-height: 1;
  }

  /* Forms: 16px is the threshold below which iOS Safari zooms the viewport on
     focus, which is what makes modal forms feel broken on a phone. Control
     heights are raised to match so the larger text is not clipped. */
  .modal .form-control,
  .modal input[type="text"],
  .modal input[type="password"],
  .modal input[type="email"],
  .modal input[type="url"],
  .modal input[type="tel"],
  .modal input[type="search"],
  .modal input[type="number"],
  .modal input[type="date"],
  .modal input[type="datetime-local"],
  .modal input[type="time"],
  .modal select,
  .modal textarea {
    font-size: 16px;
  }

  .modal input.form-control:not([type="file"]),
  .modal select.form-control,
  .modal .input-group .form-control {
    height: 42px;
  }

  .modal .bootstrap-select > .dropdown-toggle,
  .modal .input-group-addon,
  .modal .input-group-btn > .btn {
    min-height: 42px;
    font-size: 16px;
  }

  .modal textarea.form-control {
    height: auto;
  }

  /* Footer actions wrap instead of overflowing. The gap replaces the Bootstrap
     .btn + .btn margin, which flex would apply inconsistently. */
  .modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .modal .modal-footer > .btn,
  .modal .modal-footer > a.btn,
  .modal .modal-footer > button,
  .modal .modal-footer > .btn-group {
    margin: 0 !important;
  }

  /* Bottom toolbars are hidden inside modals, so their spacer must go too. */
  .modal .btn-bottom-pusher {
    display: none !important;
    margin-top: 0 !important;
  }
}

/* -----------------------------------------------------------------------------
   4. Small phones - stack the footer actions full width
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog:not(.full-screen-modal):not(.modal-sm):not(.modal-lg):not(.modal-xl):not(.modal-xxl),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-lg:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xl:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.modal-xxl:not(.full-screen-modal),
  .modal:not(.customer-create-modal):not(.task-create-modal):not(.lead-modal) > .modal-dialog.full-screen-modal {
    margin: 8px !important;
  }

  .modal > .modal-dialog {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .modal .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal .modal-footer > .btn,
  .modal .modal-footer > a.btn,
  .modal .modal-footer > button,
  .modal .modal-footer > .btn-group,
  .modal .modal-footer > .btn-group > .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .modal .modal-footer > .pull-left {
    margin-right: 0;
    margin-left: 0;
    text-align: center;
  }

  /* Inline radio/checkbox groups get too cramped side by side. */
  .modal .modal-body .radio-inline,
  .modal .modal-body .checkbox-inline {
    display: block;
    margin-bottom: 6px;
  }

  .modal .modal-body .radio-inline + .radio-inline,
  .modal .modal-body .checkbox-inline + .checkbox-inline {
    margin-left: 0;
  }
}

/* -----------------------------------------------------------------------------
   5. Short viewports (landscape phones) - claw back vertical space
   -------------------------------------------------------------------------- */

@media (max-height: 520px) and (max-width: 991px) {
  .modal .modal-content > .modal-header,
  .modal .modal-content > form > .modal-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .modal .modal-content > .modal-body,
  .modal .modal-content > form > .modal-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .modal .modal-content > .modal-footer,
  .modal .modal-content > form > .modal-footer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* -----------------------------------------------------------------------------
   6. Opt outs - modals rendered inline as a preview rather than overlaid
      (theme style settings renders a dummy modal inside a panel)
   -------------------------------------------------------------------------- */

.modal-content.theme_style_modal_example .modal > .modal-dialog {
  display: block;
  max-height: none;
  margin: 0 !important;
}

.modal-content.theme_style_modal_example .modal .modal-body {
  overflow: visible;
}