html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ── Sticky footer via flexbox ── */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

footer {
  margin-top: auto;
  flex-shrink: 0;
}

/* ── Mobile responsive ── */
@media (max-width: 767px) {
  /* Tighter container padding on phones */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Stack form rows */
  .row > [class*="col-md-"] {
    margin-bottom: 0.5rem;
  }

  /* Full-width buttons on mobile */
  .btn-group-mobile .btn {
    width: 100%;
    margin-bottom: 4px;
  }

  /* Cards breathe on mobile */
  .card {
    margin-bottom: 0.75rem;
  }

  /* Ensure tables scroll horizontally */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Offset main content below fixed-top navbar — only the direct body container */
  body > .container {
    margin-top: 60px !important;
  }

  /* Prevent the navbar's inner container from picking up the offset above */
  .navbar .container {
    margin-top: 0 !important;
  }
}

@media (max-width: 575px) {
  /* Extra-small screens */
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.1rem; }
}