:root {
  --app-primary: #b91c1c;
  --app-primary-dark: #7f1d1d;
  --app-primary-soft: #fee2e2;
  --app-accent: #111827;
  --app-accent-soft: #374151;
  --app-bg: #f8fafc;
  --app-surface: #ffffff;
  --app-surface-alt: #f3f4f6;
  --app-border: #e5e7eb;
  --app-text: #111827;
  --app-muted: #6b7280;
  --app-success: #15803d;
  --app-warning: #b45309;
  --app-danger: #b91c1c;
  --app-info: #0369a1;
  --app-neutral: #4b5563;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
}

.navbar.app-navbar {
  background: var(--app-accent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.82);
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
  color: #fff;
}

.app-navbar .nav-link.active {
  color: #fff;
  font-weight: 600;
}

.app-navbar-user {
  color: rgba(255, 255, 255, 0.72);
}

.app-page-title {
  color: var(--app-text);
}

.app-card {
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.app-field-note {
  background: var(--app-surface-alt);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 0.875rem;
}

.app-summary-link {
  color: inherit;
  display: block;
  text-decoration: none;
}

.app-summary-link:hover .app-card,
.app-summary-link:focus .app-card {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 0.125rem rgba(185, 28, 28, 0.12);
}

.app-preformatted {
  font: inherit;
  white-space: pre-wrap;
}

.app-native-date-picker {
  border: 0;
  height: 1px;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: 1px;
}

.app-muted {
  color: var(--app-muted);
}

.table > :not(caption) > * > * {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.app-page-header {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-dark);
  --bs-btn-hover-border-color: var(--app-primary-dark);
  --bs-btn-active-bg: var(--app-primary-dark);
  --bs-btn-active-border-color: var(--app-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
}

.text-bg-primary {
  background-color: var(--app-primary) !important;
}

.app-login-card {
  margin-top: 8vh;
}

.app-help-icon {
  align-items: center;
  background: var(--app-surface-alt);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  color: var(--app-muted);
  cursor: help;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 1.1rem;
  justify-content: center;
  line-height: 1;
  margin-left: 0.25rem;
  vertical-align: text-top;
  width: 1.1rem;
}

.app-help-icon:hover,
.app-help-icon:focus {
  background: var(--app-primary-soft);
  border-color: var(--app-primary);
  color: var(--app-primary-dark);
  outline: none;
}

.app-mobile-record-fields {
  display: grid;
  gap: 0.625rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-mobile-record-fields div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.app-mobile-record-fields dt {
  color: var(--app-muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.app-mobile-record-fields dd {
  font-weight: 600;
  margin-bottom: 0;
}

.app-mobile-record-fields--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-mobile-record-fields--three div:last-child:nth-child(odd) {
  grid-column: auto;
}

@media (max-width: 767.98px) {
  .app-page-header {
    display: block;
  }

  .app-page-header > .d-flex {
    margin-top: 1rem;
  }

  .table .btn {
    margin-bottom: 0.25rem;
  }
}