@media (max-width: 768px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .navbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  .navbar-right,
  .navbar a {
    flex-wrap: wrap;
  }

  .card {
    padding: 16px !important;
  }

  .stats-grid,
  .controls-grid,
  .controls .controls-grid,
  .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  .table-container {
    overflow-x: auto;
  }

  table {
    min-width: 700px;
  }

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

  .modal {
    max-width: 95vw;
  }
}