/* Shared responsive tweaks for app pages using AdminLTE layout */

html,
body {
  overflow-x: hidden;
}

.app-main {
  overflow-x: clip;
}

.app-main .table-responsive {
  -webkit-overflow-scrolling: touch;
}

.app-main .form-control,
.app-main .form-select,
.app-main .btn {
  min-height: 2.2rem;
}

.app-main .btn-group,
.app-main .btn-toolbar {
  flex-wrap: wrap;
  gap: 0.375rem;
}

@media (max-width: 991.98px) {
  .app-main,
  .app-main.p-4 {
    padding: 0.75rem !important;
  }

  .app-content-header .breadcrumb {
    float: none !important;
    justify-content: flex-start;
    margin-top: 0.5rem;
    margin-bottom: 0;
  }

  .app-content-header .row > [class*="col-"] {
    margin-bottom: 0.5rem;
  }

  .card-header {
    padding: 0.75rem;
  }

  .card-header .d-flex,
  .card-header .btn-toolbar {
    width: 100%;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  .card-header .d-flex > .form-control,
  .card-header .d-flex > .form-select,
  .card-header .d-flex > .input-group,
  .card-header .d-flex > .btn,
  .card-header .d-flex > [class*="btn-"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-main .input-group[style*="width"],
  .app-main .form-control[style*="width"],
  .app-main .form-select[style*="width"],
  .app-main .btn[style*="width"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  .app-main .table {
    font-size: 0.9rem;
  }

  .app-main .table td,
  .app-main .table th {
    vertical-align: middle;
  }

  .app-main .btn {
    white-space: normal;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .modal-xl,
  .modal-lg,
  .modal-md {
    max-width: calc(100% - 1rem);
  }

  .app-footer .float-end {
    float: none !important;
    display: block !important;
    margin-top: 0.25rem;
  }
}

@media (max-width: 575.98px) {
  .app-main h1,
  .app-main h2,
  .app-main h3,
  .app-main h4 {
    line-height: 1.25;
  }

  .card-body {
    padding: 0.75rem;
  }

  .app-main .table {
    font-size: 0.85rem;
  }
}