html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

.table-responsive,
.table-responsive-sm,
.table-responsive-md,
.table-responsive-lg,
.table-responsive-xl {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pwa-install-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1055;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

.pwa-install-btn svg {
  display: block;
  margin: 0 auto;
}

/* Make common fixed-width UI blocks fluid on phones/tablets */
.card,
.modal-dialog,
.modal-content,
.input-group,
.form-control,
.custom-select,
select,
textarea,
iframe {
  max-width: 100%;
}

table {
  width: 100%;
}

@media (max-width: 991.98px) {
  body {
    font-size: 14px;
  }

  .content-wrapper,
  .main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .card,
  .modal-content {
    margin-bottom: 0.75rem;
  }

  .row {
    margin-left: -8px;
    margin-right: -8px;
  }

  .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
  }

  .btn,
  .btn-sm,
  .btn-lg {
    white-space: normal;
  }

  /* Override desktop-only nowrap table styles for mobile readability */
  td,
  th {
    white-space: normal !important;
    word-break: break-word;
  }

  .table td,
  .table th {
    padding: 0.45rem;
    font-size: 0.82rem;
    vertical-align: middle;
  }

  .table-responsive table {
    min-width: 700px;
  }

  .content-header .breadcrumb {
    float: none !important;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px;
  }

  .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }

  .navbar-nav,
  .sidebar-menu,
  .sidebar-nav {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575.98px) {
  .pwa-install-btn {
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
  }

  .pagetitle h1,
  h1 {
    font-size: 1.25rem;
  }

  h2 {
    font-size: 1.1rem;
  }

  .modal-dialog {
    margin: 0.5rem;
  }

  .form-group,
  .mb-3,
  .mb-4 {
    margin-bottom: 0.75rem !important;
  }
}