<style>
  /* Layout and height settings */
  html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  main.container, main {
    flex: 1 0 auto;
  }
  footer {
    flex-shrink: 0;
  }

  /* Responsive table: keep columns, compact rows, enable horizontal scroll */
  @media (max-width: 767.98px) {
    .table-responsive {
      overflow-x: auto;
    }
    table.transaction-table {
      min-width: 900px; /* or your table's natural width */
    }
    table.transaction-table td,
    table.transaction-table th {
      padding: 0.4rem 0.5rem !important; /* Reduce padding */
      font-size: 0.95em !important;      /* Slightly smaller font */
      white-space: nowrap;               /* Prevent wrapping */
      vertical-align: middle !important;
    }
  }

  /* Highlight table row on hover */
  .transaction-table tbody tr:hover {
    background-color: #fffbe6;
  }

  @media (max-width: 575.98px) {
    .btn-group {
      flex-direction: column !important;
      width: 100%;
    }
    .btn-group .btn {
      width: 100%;
      margin-bottom: 0.5rem;
    }
  }

  /* Move inline styles from dashboard.html to CSS */

  /* Profile image styling */
  .profile-img {
    object-fit: cover;
  }

  /* Online status dot */
  .profile-status-dot {
    width: 22px;
    height: 22px;
  }

  /* Dot icon inside status */
  .profile-status-dot i {
    font-size: 1.5rem;
    position: absolute;
    top: -7px;
    left: 2px;
  }

  /* Table icon sizes for time and date */
  .table-icon {
    font-size: 0.9em;
  }

  /* Stack profile image and details vertically on small screens */
  @media (max-width: 767.98px) {
    .profile-card-flex {
      flex-direction: column !important;
      align-items: center !important;
      text-align: center;
    }
    .profile-card-flex .position-relative {
      margin-right: 0 !important;
      margin-bottom: 1rem !important;
    }
    .profile-card-flex .flex-grow-1 {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .profile-card-flex .badge {
      margin-bottom: 0.5rem !important;
    }
    .profile-card-flex ul.list-unstyled {
      margin-bottom: 0.5rem !important;
      margin-top: 0 !important;
      padding-left: 0 !important;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .profile-card-flex ul.list-unstyled li {
      justify-content: center;
      width: 100%;
    }
  }

  /* Hide the desktop profile card on small screens */
  @media (max-width: 767.98px) {
    .profile-card-flex {
      display: none !important;
    }
  }
</style>

