html {
  font-size: 14px;
  background: #f4f6f8;
}

@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;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background: #f4f6f8;
  color: #1d2939;
}

.navbar-brand {
  color: #163d63;
  font-weight: 700;
  letter-spacing: .01em;
}

.eyebrow {
  margin: 0 0 .35rem;
  color: #356b8f;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.access-message,
.collection-header {
  margin: 2rem auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid #dce3e9;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .6rem 1.8rem rgba(24, 54, 84, .07);
}

.access-message {
  max-width: 44rem;
}

.access-message h1,
.collection-header h1 {
  margin: 0;
  color: #163d63;
  font-size: clamp(1.85rem, 5vw, 2.75rem);
}

.region-location {
  margin: .2rem 0 0;
  color: #52606d;
  font-size: 1.05rem;
}

.collection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.collection-context {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.collection-context div {
  min-width: 7.5rem;
  padding: .8rem 1rem;
  border-radius: .7rem;
  background: #eef5f9;
}

.collection-context dt {
  color: #52606d;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.collection-context dd {
  margin: .15rem 0 0;
  color: #163d63;
  font-size: 1.1rem;
  font-weight: 700;
}

.page-intro {
  margin: 0 0 1.25rem;
  color: #52606d;
}

.validation-summary:empty,
.validation-summary.validation-summary-valid {
  display: none;
}

.division-list {
  display: grid;
  gap: 1.25rem;
}

.division-card {
  overflow: hidden;
  border: 1px solid #dce3e9;
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 .25rem .9rem rgba(24, 54, 84, .05);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.division-card[data-dirty="true"] {
  border-color: #c58a1b;
  box-shadow: 0 0 0 .15rem rgba(197, 138, 27, .12);
}

.division-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e7ecf0;
  background: #f8fafb;
}

.division-card__heading h2 {
  margin: 0;
  color: #163d63;
  font-size: 1.35rem;
}

.final-control {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 700;
}

.final-control input {
  width: 1.15rem;
  height: 1.15rem;
}

.count-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem 1.25rem 0;
}

.count-grid label,
.comments-field {
  display: grid;
  gap: .35rem;
  color: #344054;
  font-weight: 650;
}

.count-grid input,
.comments-field textarea {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #aebbc6;
  border-radius: .5rem;
  background: #fff;
  color: #101828;
  font: inherit;
  font-weight: 400;
}

.count-grid input:focus,
.comments-field textarea:focus {
  border-color: #24618d;
  box-shadow: 0 0 0 .2rem rgba(36, 97, 141, .16);
  outline: none;
}

.count-grid input[readonly],
.comments-field textarea[readonly] {
  border-color: #d5dce2;
  background: #eef1f4;
  color: #667085;
  cursor: not-allowed;
}

.comments-field {
  padding: 1.1rem 1.25rem 0;
}

.final-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 1.25rem 0;
  padding: 1rem;
  border: 1px solid #dce3e9;
  border-radius: .6rem;
  background: #f8fafb;
}

.final-lock-note {
  color: #667085;
  font-size: .875rem;
  font-weight: 650;
}

.division-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.25rem;
}

.save-status {
  min-height: 1.25rem;
  margin-right: auto;
  color: #52606d;
  font-size: .9rem;
  font-weight: 650;
}

.save-status[data-status="dirty"] {
  color: #8a5b08;
}

.save-status[data-status="saved"] {
  color: #24703d;
}

.save-status[data-status="error"] {
  color: #a12622;
}

.save-message[hidden] {
  display: none;
}

.btn-primary {
  border-color: #1f5b86;
  background: #1f5b86;
  font-weight: 650;
}

.btn-primary:hover {
  border-color: #174766;
  background: #174766;
}

@media (max-width: 640px) {
  .collection-header,
  .collection-context {
    align-items: stretch;
    flex-direction: column;
  }

  .collection-context {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .collection-context div {
    min-width: 0;
  }

  .count-grid {
    grid-template-columns: 1fr;
  }

  .division-card__actions .btn {
    width: 100%;
  }

  .final-section {
    align-items: flex-start;
    flex-direction: column;
  }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}