.card,
.card-soft {
  background: var(--upf-color-surface);
  border: 1px solid var(--upf-color-border);
  border-radius: var(--upf-radius-lg);
  box-shadow: var(--upf-shadow-xs);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card:hover,
.card-soft:hover {
  box-shadow: var(--upf-shadow-sm);
  border-color: var(--upf-color-border-strong);
}

.card .card-body,
.card-soft .card-body {
  padding: var(--upf-card-padding);
}

.card .card-title,
.card-soft .card-title {
  color: var(--upf-text-primary);
  font-weight: 700;
  margin-bottom: .75rem;
}

.header-title {
  color: var(--upf-text-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .8rem;
}

.text-muted {
  color: var(--upf-text-secondary) !important;
}

/* --- Primary accent card (replaces Bootstrap border-primary border) --- */
.card.card-primary,
.card-soft.card-primary {
  border-color: var(--upf-primary);
}

.card.card-primary:hover,
.card-soft.card-primary:hover {
  border-color: var(--upf-primary);
  box-shadow: 0 0 0 3px var(--upf-primary-soft), var(--upf-shadow-sm);
}

/* --- Bottom accent card (replaces border-primary border-bottom) --- */
.card.card-primary-bottom,
.card-soft.card-primary-bottom {
  border-bottom: 3px solid var(--upf-primary);
}

/* --- Full-height card (replaces h-100) --- */
.upf-card-full-height {
  height: calc(100% - 1.5rem);
}

/* --- Table bleed (cancel card-body padding for edge-to-edge tables) --- */
.upf-card-table {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}