/* Small CSS for responsive logo */
.logo-img {
  max-height: 120px;
  width: auto;
}
@media (max-width: 576px) {
  .logo-img { max-height: 80px; }
}
.header-center { text-align: center; margin-bottom: 1rem; }

/* Responsive table: on small screens, show rows as cards with labels */
@media (max-width: 768px) {
  .table-responsive { overflow-x: hidden; }
  .table thead { display: none; }
  .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { margin-bottom: 0.75rem; border: 1px solid #e9ecef; padding: 0.5rem; border-radius: 6px; }
  .table td { padding: 0.25rem 0.5rem; border: none; }
  .table td:before { content: attr(data-label); font-weight: 600; display: inline-block; width: 45%; }
  .table .actions { text-align: right; }
  /* hide created timestamp on very small screens to reduce clutter */
  .col-created { display: none; }
}

/* Keep horizontal scroll on medium screens if necessary */
@media (min-width: 769px) and (max-width: 991px) {
  .table-responsive { overflow-x: auto; }
}