* {
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  nav,
  .nav,
  .navbar,
  header {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  nav a,
  .nav a,
  .navbar a,
  header a,
  button {
    min-height: 38px;
  }

  .container,
  main,
  .content {
    width: 100% !important;
    padding: 10px !important;
  }

  .cards,
  .dashboard-cards,
  .summary-cards,
  .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
  }

  table {
    min-width: 700px;
  }

  .table-wrap,
  .table-container,
  .card:has(table),
  section:has(table),
  div:has(> table) {
    overflow-x: auto !important;
    width: 100% !important;
  }

  input,
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  .form-row,
  .row,
  .filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  canvas {
    max-width: 100% !important;
  }
}