/* app/assets/stylesheets/components/cards.css */

.card {
  @apply w-full overflow-hidden rounded-xl border border-gray-200 bg-white
         shadow-md shadow-gray-200/60 transition-all duration-200 ease-in-out;
}

.card-header {
  @apply flex items-start justify-between gap-4 border-b border-gray-200 px-6 py-4;
}

.card-body {
  @apply px-6 py-5;
}

.card-footer {
  @apply flex items-center justify-between gap-3 border-t border-gray-200 px-6 py-4;
}

.card-title {
  @apply text-lg font-semibold text-gray-900 leading-tight;
}

.card-subtitle {
  @apply mt-1 text-sm font-medium text-gray-500;
}

.card-actions {
  @apply flex items-center gap-2 shrink-0;
}

.card-flat {
  @apply border-gray-300 shadow-none;
}

.card-muted {
  @apply bg-slate-100 border-slate-300 shadow-none;
}

.card-hover:hover {
  @apply -translate-y-0.5 shadow-lg shadow-gray-200/70 border-gray-300;
}

@media (max-width: 640px) {
  .card-header,
  .card-footer {
    @apply flex-col items-stretch;
  }

  .card-header,
  .card-body,
  .card-footer {
    @apply px-4 py-4;
  }

  .card-actions {
    @apply w-full justify-start;
  }
}