/* Bootstrap supplies the component system; these rules define the app's visual identity. */

:root {
  --bs-primary: #356859;
  --bs-primary-rgb: 53, 104, 89;
  --bs-link-color: #28705b;
  --bs-link-hover-color: #1f5746;
}

body {
  color: #24312d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-navbar { background: linear-gradient(120deg, #214a40, #356859); }
.app-content { max-width: 70rem; }
.page-heading { margin-bottom: 2rem; }
.page-heading h1 { color: #193c33; font-weight: 700; letter-spacing: -0.03em; }
.card { border: 0; border-radius: 1rem; }
.card-header { background: transparent; border-bottom-color: #e8eeeb; }
.collection-card { transition: transform 150ms ease, box-shadow 150ms ease; }
.collection-card:hover { box-shadow: 0 1rem 2rem rgb(24 58 49 / 10%) !important; transform: translateY(-2px); }
.collection-icon { align-items: center; background: #e3f0ea; border-radius: .75rem; color: #28705b; display: inline-flex; font-size: 1.25rem; height: 3rem; justify-content: center; width: 3rem; }
.section-heading { color: #193c33; font-size: 1.15rem; font-weight: 700; }
.stat-label { color: #6c7a75; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.list-group-item { border-color: #e8eeeb; }
.button_to { display: inline-block; }
.form-control:focus, .form-select:focus { border-color: #7bb6a0; box-shadow: 0 0 0 .25rem rgb(53 104 89 / 15%); }

.card input:not([type="checkbox"]):not([type="submit"]),
.card select,
.card textarea {
  border: 1px solid #ced4da;
  border-radius: .375rem;
  display: block;
  max-width: 100%;
  padding: .375rem .75rem;
}

.card input:not([type="checkbox"]):not([type="submit"]),
.card select,
.card textarea { width: 100%; }

.card input[type="submit"]:not(.btn),
.card button:not(.btn) {
  background: #356859;
  border: 1px solid #356859;
  border-radius: .375rem;
  color: #fff;
  padding: .375rem .75rem;
}

.recurrence-fields__details { display: none; }
.recurrence-fields__details.is-visible { display: block; }

.card .compact-input-group {
  align-items: stretch;
  display: flex !important;
  flex-wrap: nowrap;
  width: 100% !important;
}

.card .compact-input-group > .form-control {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
}

.card .compact-input-group > .form-select {
  flex: 0 0 11rem !important;
  max-width: 11rem;
  width: 11rem !important;
}

.card .compact-input-group > .input-group-text {
  align-items: center;
  display: flex;
  white-space: nowrap;
}

.card .compact-input-group > .input-group-text,
.card .compact-input-group > .form-control,
.card .compact-input-group > .form-select { border-radius: 0; }

.card .compact-input-group > :first-child { border-radius: .375rem 0 0 .375rem; }
.card .compact-input-group > :last-child { border-radius: 0 .375rem .375rem 0; }

@media (max-width: 767.98px) {
  .app-navbar .navbar-nav {
    align-items: center;
    flex-direction: row;
    gap: .125rem;
    margin-top: 0;
  }

  .app-navbar .nav-link { padding: .25rem .4rem; }
  .app-navbar .button_to { margin: 0; }
}