/* ---------------------------------------------------------------
   Phone layout only.

   Everything here sits inside a max-width media query, so desktop is
   untouched. Nothing but spacing, sizing and scrolling is changed:
   no colours, no wording, no behaviour.
   --------------------------------------------------------------- */

@media screen and (max-width: 767.98px) {

  /* ----- page frame: the default gutters eat the screen ----- */
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .body-wrapper {
    overflow-x: hidden;
  }

  .card {
    margin-bottom: 12px !important;
    border-radius: 10px;
  }

  .card-body {
    padding: 14px !important;
  }

  /* a card inside a card does not need two full paddings */
  .card .card {
    margin-bottom: 0 !important;
  }

  .card .card .card-body {
    padding: 10px !important;
  }

  .card-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  /* ----- stacked columns need air between them ----- */
  .container-fluid > .row > [class*="col-"] {
    margin-bottom: 10px;
  }

  .row {
    --bs-gutter-x: 0.75rem;
  }

  /* ----- forms: 16px stops iOS zooming in on focus ----- */
  .form-control,
  .form-select,
  select.form-control,
  input.form-control,
  textarea.form-control {
    font-size: 16px !important;
    height: auto !important;
    min-height: 44px;
    padding: 10px 12px !important;
  }

  label {
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  .form-group {
    margin-bottom: 10px;
  }

  /* date fields shrink oddly on iOS without this */
  input[type="date"] {
    min-width: 100%;
    display: block;
  }

  /* ----- buttons: comfortable to tap, never squeezed side by side ----- */
  .btn {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
  }

  /* the month / year / all-time row and the filter row */
  .col-12.text-center > .btn,
  .col-md-4 > .btn,
  .col-md-3 > .btn {
    width: 100% !important;
    margin-bottom: 8px;
  }

  /* the filter button loses its desktop label offset */
  #filterbtn {
    margin-top: 6px !important;
  }

  /* ----- select2 must not overflow its column ----- */
  .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 44px !important;
    padding: 6px 4px;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    font-size: 16px;
  }

  .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
  }

  /* ----- tables: scroll sideways instead of breaking the page ----- */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    width: 100%;
  }

  .table > :not(caption) > * > * {
    padding: 8px 6px !important;
    font-size: 13px;
  }

  .table th {
    font-size: 13px;
    white-space: nowrap;
  }

  /* ----- DataTables controls stack instead of colliding ----- */
  .dt-buttons,
  div.dt-buttons {
    float: none !important;
    text-align: right;
    width: 100%;
    margin-bottom: 8px !important;
  }

  .dt-button {
    margin-bottom: 8px !important;
    margin-right: 0 !important;
    width: 100%;
  }

  .dataTables_filter {
    float: none !important;
    text-align: right !important;
    width: 100%;
    margin-bottom: 8px;
  }

  .dataTables_filter label {
    width: 100%;
  }

  .dataTables_filter input {
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    min-height: 44px;
    font-size: 16px;
    border: 1px solid #dfe5ef;
    border-radius: 6px;
    padding: 6px 10px;
  }

  .dataTables_length,
  .dataTables_info,
  .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    width: 100%;
  }

  .dataTables_paginate {
    margin-top: 8px;
  }

  .dataTables_paginate .paginate_button {
    padding: 8px 12px !important;
    min-width: 40px;
  }

  /* ----- modal: the inline 25px padding is too much on a phone ----- */
  .modal-dialog {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
  }

  .modal-content {
    padding: 12px !important;
  }

  .modal-body {
    padding: 0 !important;
  }

  /* the update / delete row at the bottom of every modal */
  .modal-content > .row[style*="padding"] {
    padding: 12px 0 0 0 !important;
  }

  .modal-content > .row > .col-6 .btn {
    width: 100%;
    margin-left: 0 !important;
  }

  /* ----- pictures ----- */
  #images_preview img,
  #images_up_preview img {
    width: 62px !important;
    height: 62px !important;
  }

  .imgsaved img {
    width: 76px !important;
    height: 76px !important;
  }

  .imgdrop,
  .imgdel {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 16px !important;
  }

  /* ----- header bar ----- */
  .app-header .navbar {
    padding: 6px 10px;
  }

  .app-header .btn {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .app-header .nav-item {
    margin-left: 6px !important;
  }

  /* ----- footer credit ----- */
  .py-6.px-6 {
    padding: 16px 10px !important;
  }

  .py-6.px-6 p {
    font-size: 12px !important;
  }
}

/* very small phones need the table text a touch smaller again */
@media screen and (max-width: 380px) {
  .table > :not(caption) > * > * {
    padding: 6px 4px !important;
    font-size: 12px;
  }

  .card-body {
    padding: 10px !important;
  }
}