body {
  background-color: #f7f7fb;
}

.sidebar {
  width: 260px;
  min-height: calc(100vh - 56px);
}

@media (min-width: 768px) {
  .sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }
}

.card-stat .display-6 {
  font-weight: 600;
}

.table-responsive {
  background: #fff;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4b3f72, #2b2440);
}

.login-card {
  width: 100%;
  max-width: 380px;
}

/* ---- Mobile ---- */

/* Prevent any element from forcing the whole page to scroll sideways;
   individual .table-responsive blocks still scroll on their own. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Page headers are almost always "<h3 title> ... <button>" in a row that
   never wraps by default, which pushes the button off-screen on narrow
   phones instead of dropping it to its own line. */
@media (max-width: 575.98px) {
  .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    row-gap: .5rem;
  }
  .d-flex.justify-content-between.align-items-center > h3,
  .d-flex.justify-content-between.align-items-center > h5 {
    max-width: 100%;
    word-break: break-word;
  }
}

@media (max-width: 767.98px) {
  main {
    padding: 1rem !important;
  }

  h3 {
    font-size: 1.35rem;
  }

  /* Bootstrap defaults form controls to 16px on their own, but our
     form-control-sm inputs (used in filter bars and table-embedded forms)
     drop below that, which makes iOS Safari zoom in on focus. */
  .form-control, .form-select, .form-control-sm, .form-select-sm {
    font-size: 16px;
  }

  /* Icon-only action buttons (view/edit/delete) need a real touch target. */
  .btn-sm {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card-body, .card-header {
    padding: .75rem;
  }

  .modal-dialog {
    margin: .5rem;
  }

  .card-stat .display-6 {
    font-size: 1.5rem;
  }
}