/* Global responsive typography (mobile-friendly)
   Goal: Prevent oversized text on phones while keeping inputs/buttons usable.
*/

html {
  font-size: 16px; /* desktop reference */
}

body {
  font-size: 1rem;
}

@media (max-width: 576px) {
  html {
    font-size: 14px; /* slightly smaller base on small screens */
  }

  /* Reduce wasted space but keep readability */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .card-body {
    padding: 1rem;
  }

  /* Slightly tighter tables on small screens */
  .table td,
  .table th {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }
}