body {
  font-family: "Overpass", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle app background */
.tempo-bg {
  /* Keep a pure white base and paint very soft tints on top */
  background-color: #ffffff;
  background-image:
    radial-gradient(1100px 520px at 18% -20%, rgba(233, 242, 255, 0.85) 0%, rgba(233, 242, 255, 0.45) 40%, rgba(233, 242, 255, 0) 72%),
    radial-gradient(1100px 520px at 110% -12%, rgba(255, 233, 239, 0.85) 0%, rgba(255, 233, 239, 0.40) 35%, rgba(255, 233, 239, 0) 70%);
  background-repeat: no-repeat;
}

.title {
  font-family: Caveat, sans-serif;
}

/* Smooth fade for HTMX row removal */
tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

/* Dashboard metric cards */
.card.metric-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

/* Small contextual pill above numbers */
.metric-badge {
  display: inline-block;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .5rem;
}

a {
  cursor: pointer;
}