.simple-card {
  @apply bg-white shadow rounded-lg p-6 mb-6;

  h2 {
    @apply text-2xl font-semibold mb-4
  }
}

.simple-card__body {
  @apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4;

  strong {
    @apply text-sm font-medium text-gray-500;
  }

  p {
    @apply mt-1 text-base text-gray-900;
  }
}

.show-record-card {
  @apply bg-white shadow rounded-lg p-6 mb-6;

  h1 {
    @apply font-bold text-4xl mb-6;
  }
}

.show-record-card__content {
  @apply pb-4 mb-4 border-b border-gray-200;

  strong {
    @apply text-sm font-medium text-gray-500;
  }

  p {
    @apply mt-1 text-base text-gray-900;
  }

  div {
    @apply mb-4;
  }
}

.progress-card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200;
}

.progress-card:hover {
  @apply shadow-lg;
  transform: translateY(-2px);
}

.progress-bar {
  @apply bg-gradient-to-r from-blue-500 to-blue-600 h-2 rounded-full transition-all duration-500 ease-out;
}

.status-badge {
  @apply border px-2 py-1 rounded-full text-xs font-medium;
}

.card-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}