/*
 * Mobile-only fixes (phones, screens narrower than 768px).
 * Laptop / desktop layout is not affected.
 */
@media (max-width: 767.98px) {

  /* More room for content: smaller outer gaps and page title */
  .content-header { padding: 10px 8px 6px; }
  .content-header h1 { font-size: 1.5rem; }
  .content-wrapper > .content { padding: 0 8px; }
  #PageMainWrapper .card-body { padding: 12px; }
  #PageMainWrapper .card-header { padding: 10px 12px; }

  /* Item-entry tables (Purchase, Sales, Credit/Debit Note, etc.):
     scroll sideways inside their own box instead of pushing the whole page off screen */
  #PageMainWrapper table.table:not(.dataTable) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep inputs inside those tables wide enough to tap and read */
  #PageMainWrapper table.table:not(.dataTable) td .form-control {
    min-width: 110px;
  }

  #PageMainWrapper table.table:not(.dataTable) td textarea.form-control {
    min-width: 160px;
  }

  #PageMainWrapper table.table:not(.dataTable) td .bootstrap-select {
    min-width: 200px;
  }

  /* List / report tables (DataTables): only the table slides sideways,
     the buttons and search box above it stay in place */
  #PageMainWrapper .dataTables_wrapper,
  #PageMainWrapper .table-responsive {
    overflow-x: visible;
  }

  #PageMainWrapper .dataTables_wrapper > table.dataTable,
  #PageMainWrapper .dataTables_wrapper .col-sm-12 > table.dataTable {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Table toolbar: buttons in one wrapped row, search box on its own full-width row */
  #PageMainWrapper .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    float: none !important;
    margin: 8px 0;
  }

  #PageMainWrapper .dataTables_wrapper .dt-buttons .btn {
    margin: 0;
  }

  #PageMainWrapper .dataTables_wrapper .dataTables_filter,
  #PageMainWrapper .dataTables_wrapper .dataTables_length {
    float: none;
    clear: both;
    width: 100%;
    text-align: left;
    margin-bottom: 8px;
  }

  #PageMainWrapper .dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  #PageMainWrapper .dataTables_wrapper .dataTables_filter input {
    flex: 1;
    width: auto;
    margin-left: 0 !important;
  }

  #PageMainWrapper .dataTables_wrapper .dataTables_info,
  #PageMainWrapper .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-top: 8px;
  }

  #PageMainWrapper .dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Popups: use the full phone width */
  .modal-dialog { margin: 8px; }
}