/* Global layout consistency + responsive defaults */
:root {
  --app-content-max-width: 1400px;
  --app-content-padding-x: clamp(1rem, 2.4vw, 2rem);
}

/* Keep every page on the same visual width */
main > .container,
section > .container,
footer .container,
header .container {
  width: 100%;
  max-width: calc(var(--app-content-max-width) + var(--app-content-padding-x) * 2);
  padding-left: var(--app-content-padding-x);
  padding-right: var(--app-content-padding-x);
  margin-left: auto;
  margin-right: auto;
}

/* Consistent card spacing */
.card {
  border-radius: 0.85rem;
}

/* Better mobile spacing for all pages */
@media (max-width: 991.98px) {
  .card {
    border-radius: 0.75rem;
  }

  .btn,
  .form-control,
  .form-select {
    min-height: 42px;
  }
}

/* Phone-first compact improvements */
@media (max-width: 767.98px) {
  section {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .table-responsive {
    border-radius: 0.65rem;
  }

  .table {
    font-size: 0.92rem;
  }

  .offcanvas {
    width: min(92vw, 360px) !important;
  }
}

/* Extra small devices */
@media (max-width: 420px) {
  .btn,
  .badge {
    font-size: 0.86rem;
  }
}