:root {
  --nat20-focus: #0d6efd;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
}

:focus-visible {
  outline: 3px solid var(--nat20-focus);
  outline-offset: 2px;
}

/* Data tables use the full page width and scroll inside their own wrapper. */
.app-table-container {
  width: 100%;
  max-width: 100% !important;
  padding-right: clamp(0.75rem, 2vw, 2rem);
  padding-left: clamp(0.75rem, 2vw, 2rem);
}

.app-table-column {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.app-table-responsive,
.app-data-table {
  width: 100%;
}

.app-data-table {
  min-width: 100%;
  margin-bottom: 0;
}

.app-table-responsive {
  margin-bottom: 1rem;
  border-radius: 0.375rem;
}

.app-data-table thead th {
  vertical-align: middle;
  white-space: nowrap;
}

.app-data-table th.app-generic-sort {
  cursor: pointer;
  user-select: none;
}

.app-data-table th.app-generic-sort::after {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.45rem;
  color: var(--bs-secondary-color);
  content: "\2195";
  text-align: center;
}

.app-data-table th.app-generic-sort[aria-sort="ascending"]::after {
  color: var(--bs-emphasis-color);
  content: "\2191";
}

.app-data-table th.app-generic-sort[aria-sort="descending"]::after {
  color: var(--bs-emphasis-color);
  content: "\2193";
}

.app-data-table th.app-generic-sort[data-sort-indicator]::after {
  min-width: 2.75rem;
  color: var(--bs-emphasis-color);
  content: attr(data-sort-indicator);
  font-weight: 700;
}

@media print {
  .app-table-container {
    padding: 0;
  }

  .app-data-table th.app-generic-sort::after {
    display: none;
  }
}

fieldset legend {
  float: none;
  width: auto;
}

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

@media (max-width: 767.98px) {
  header.position-fixed {
    position: static !important;
  }

  body {
    padding-top: 0 !important;
  }

  .container,
  .container-fluid {
    max-width: 100%;
  }
}