:root {
  --bv-ocean: #176b87;
  --bv-ocean-dark: #0f4f66;
  --bv-mint: #64ccc5;
  --bv-sun: #ffb703;
  --bv-coral: #f9735b;
  --bv-ink: #19323c;
  --bv-paper: #fffaf0;
  --bv-cloud: #f4f9f8;
  --bs-primary: var(--bv-ocean);
  --bs-primary-rgb: 23, 107, 135;
  --bs-link-color: var(--bv-ocean);
  --bs-link-hover-color: var(--bv-ocean-dark);
}

body {
  color: var(--bv-ink);
  background:
    radial-gradient(circle at top left, rgba(100, 204, 197, 0.22), transparent 28rem),
    linear-gradient(180deg, var(--bv-cloud) 0%, #ffffff 42%, var(--bv-paper) 100%);
  min-height: 100vh;
}

.app-shell {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(14px);
}

.navbar-brand {
  color: var(--bv-ocean-dark);
  letter-spacing: 0;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bv-ocean), var(--bv-mint));
  color: #fff;
  font-weight: 700;
}

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

.btn-themed-confirm {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bv-ocean);
  --bs-btn-border-color: var(--bv-ocean);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bv-ocean-dark);
  --bs-btn-hover-border-color: var(--bv-ocean-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bv-ocean-dark);
  --bs-btn-active-border-color: var(--bv-ocean-dark);
}

.btn-themed-edit {
  --bs-btn-color: var(--bv-ocean-dark);
  --bs-btn-border-color: rgba(23, 107, 135, 0.44);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bv-ocean);
  --bs-btn-hover-border-color: var(--bv-ocean);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bv-ocean-dark);
  --bs-btn-active-border-color: var(--bv-ocean-dark);
  background: rgba(100, 204, 197, 0.12);
}

.btn-themed-delete {
  --bs-btn-color: #b23b2e;
  --bs-btn-border-color: rgba(249, 115, 91, 0.58);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bv-coral);
  --bs-btn-hover-border-color: var(--bv-coral);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #d95743;
  --bs-btn-active-border-color: #d95743;
  background: rgba(249, 115, 91, 0.08);
}

.card {
  border-radius: 0.75rem;
}

.travel-card {
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.travel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2rem rgba(25, 50, 60, 0.14) !important;
}

.travel-card-media {
  height: 170px;
  background:
    linear-gradient(135deg, rgba(23, 107, 135, 0.92), rgba(100, 204, 197, 0.84)),
    linear-gradient(45deg, var(--bv-paper), #fff);
}

.travel-card-initial {
  width: 4rem;
  height: 4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--bv-ocean-dark);
  font-size: 1.75rem;
}

.stat-card {
  border-top: 4px solid var(--bv-mint) !important;
}

.auth-card {
  overflow: hidden;
  border-top: 4px solid var(--bv-mint) !important;
}

.empty-state {
  padding: 1rem;
  border: 1px solid rgba(23, 107, 135, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.72);
  color: var(--bv-ocean-dark);
}

.code-sample {
  border: 1px solid rgba(23, 107, 135, 0.16);
  border-radius: 0.75rem;
  background: rgba(244, 249, 248, 0.92);
}

.section-separator {
  margin: 0.75rem 0;
  border-color: rgba(23, 107, 135, 0.2);
  opacity: 1;
}

.help-tooltip {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  line-height: 1;
  font-size: 0.85rem;
}

.category-detail-link {
  color: var(--bv-ocean-dark);
  text-decoration: none;
}

.category-detail-link:hover {
  color: var(--bv-ocean);
  text-decoration: underline;
}

.journal-actions .btn {
  min-width: 6.75rem;
}

.nav-pills .nav-link {
  color: var(--bv-ocean-dark);
}

.nav-pills .nav-link.active {
  background-color: var(--bv-ocean);
}

.badge-status {
  background: rgba(255, 183, 3, 0.18);
  color: #795300;
}

.toast-container {
  z-index: 1100;
}

.return-top {
  position: fixed;
  right: 1rem;
  bottom: 5.25rem;
  z-index: 1090;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.return-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  .travel-card-media {
    height: 145px;
  }

  .journal-actions .btn {
    width: 100%;
  }
}