/*
 * Project-wide responsive fixes (loaded on every page after the theme CSS).
 * Rule of thumb: wide content scrolls inside its own box; nothing is hidden and the page itself never scrolls sideways.
 */

/* Select2 dropdowns never push the form wider than its column */
.select2-container {
  max-width: 100%;
}

/* Card headers (title + filters + buttons) wrap instead of overflowing */
@media (max-width: 991.98px) {
  .card .card-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    height: auto;
  }

  .card .card-header .card-header-form,
  .card .card-header .card-header-action {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  /* Tables that are not already in a .table-responsive box scroll sideways inside the card */
  :not(.table-responsive) > table.table:not(.dataTable) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* DataTables without the Responsive extension: same, around the whole widget */
  .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
  }

  /* DataTables search / length / paging controls stack instead of squeezing */
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    text-align: left;
    float: none;
  }

  .dataTables_wrapper .dataTables_filter input {
    max-width: 100%;
  }

  .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  /* Buttons next to each other in a cell keep a little space when they wrap */
  .table td .btn {
    margin-bottom: 0.25rem;
  }

  /* Long words / numbers (product no, remarks) wrap inside cards and modals */
  .card-body,
  .modal-body {
    overflow-wrap: anywhere;
  }

  .modal-body .table td,
  .modal-body .table th,
  .card-body .table td,
  .card-body .table th {
    overflow-wrap: normal;
  }
}

/* Inputs that set a fixed max-width inline (filter bars) use the full width on phones */
@media (max-width: 575.98px) {
  form [style*="max-width"].form-control {
    max-width: 100% !important;
  }

  .modal-dialog {
    margin: 0.5rem;
  }
}

/*# sourceMappingURL=custom.css.map */