/* Shared responsive helpers for all views */
html, body {
  overflow-x: hidden;
}

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

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

.form-control,
.form-select,
.btn {
  min-height: 2.5rem;
}

.table-responsive {
  border-radius: 0.75rem;
}

.navbar .navbar-collapse {
  flex-wrap: wrap;
}

.navbar .nav-link,
.navbar .btn-link.nav-link {
  white-space: nowrap;
}

.sidebar {
  position: sticky;
  top: 1rem;
}

.sidebar .list-group-item {
  border-width: 1px 0;
}

.card {
  width: 100%;
}

.btn-group,
.btn-toolbar {
  flex-wrap: wrap;
}

.btn-actions-group {
  flex-wrap: wrap;
}

.input-group {
  flex-wrap: wrap;
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .btn {
  flex: 1 1 auto;
}

@media (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .container-fluid > .row,
  .container > .row {
    row-gap: 1rem;
  }

  [class*="col-md-3"],
  [class*="col-md-4"],
  [class*="col-md-6"],
  [class*="col-md-8"],
  [class*="col-md-9"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .sidebar {
    position: static;
  }

  .navbar .navbar-nav {
    width: 100%;
    gap: 0.25rem;
  }

  .navbar .navbar-nav .nav-item,
  .navbar .navbar-nav .nav-link,
  .navbar .navbar-nav form {
    width: 100%;
  }

  .navbar .navbar-nav .btn,
  .navbar .navbar-nav .nav-link {
    justify-content: flex-start;
  }

  .navbar .navbar-collapse {
    padding-top: 0.75rem;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.15rem; }
}

@media (max-width: 767.98px) {
  body {
    font-size: 0.95rem;
  }

  .table {
    font-size: 0.875rem;
  }

  .btn-group,
  .btn-toolbar {
    flex-wrap: wrap;
  }

  .d-flex.justify-content-between.align-items-center.mb-4,
  .d-flex.justify-content-between.align-items-center.mb-3,
  .d-flex.justify-content-between.align-items-center.mb-2 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .d-flex.justify-content-between,
  .d-flex.align-items-center {
    flex-wrap: wrap;
  }

  .btn-group .btn,
  .btn-toolbar .btn,
  .input-group .btn {
    flex: 1 1 auto;
  }

  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

  .card {
    margin-bottom: 0.75rem;
  }

  .table-responsive {
    border: 0;
  }

  .table {
    min-width: 720px;
  }

  .btn-actions-group {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  .card-body,
  .card-header {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .btn {
    width: 100%;
  }

  .btn-group,
  .btn-toolbar {
    width: 100%;
  }

  .btn-group .btn,
  .btn-toolbar .btn {
    width: 100%;
  }

  .btn-actions-group .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .input-group {
    display: flex;
    gap: 0.5rem;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0;
    width: 100%;
  }

  .navbar .navbar-brand {
    white-space: normal;
  }

  .table th,
  .table td {
    word-break: break-word;
  }
}