@layer components {

    /* ========= Base card ========= */
    .card {
        @apply rounded-2xl border border-slate-200 bg-white shadow-sm
        dark:border-slate-800 dark:bg-slate-900;
    }

    .card-soft {
        @apply bg-slate-50
        dark:bg-slate-800;
    }

    .card-hover {
        @apply transition hover:shadow-md
        dark:hover:shadow-lg dark:hover:shadow-black/30;
    }

    /* ========= Sections ========= */
    .card-header {
        @apply flex items-start justify-between gap-4 border-b border-slate-200 p-5
        dark:border-slate-800;
    }

    .card-body {
        @apply p-5;
    }

    .card-footer {
        @apply border-t border-slate-200 p-5
        dark:border-slate-800;
    }

    /* ========= Titles & text ========= */
    .card-title {
        @apply text-base font-semibold text-slate-900
        dark:text-slate-100;
    }

    .card-subtitle {
        @apply mt-1 text-sm text-slate-600
        dark:text-slate-400;
    }

    .card-text {
        @apply text-sm leading-relaxed text-slate-700
        dark:text-slate-300;
    }

    /* ========= Header actions ========= */
    .card-actions {
        @apply flex shrink-0 flex-wrap items-center gap-2;
    }

    /* ========= Media / icon ========= */
    .card-icon {
        @apply grid h-10 w-10 shrink-0 place-items-center rounded-2xl
        bg-slate-900 text-white
        dark:bg-slate-100 dark:text-slate-900;
    }

    .card-icon-soft {
        @apply bg-slate-100 text-slate-900
        dark:bg-slate-800 dark:text-slate-100;
    }

    /* ========= Stats card ========= */
    .stat {
        @apply rounded-2xl bg-slate-50 p-4
        dark:bg-slate-800;
    }

    .stat-label {
        @apply text-xs font-semibold uppercase tracking-wide text-slate-600
        dark:text-slate-400;
    }

    .stat-value {
        @apply mt-2 text-3xl font-semibold text-slate-900
        dark:text-slate-100;
    }

    .stat-hint {
        @apply mt-1 text-sm text-slate-600
        dark:text-slate-400;
    }

    /* ========= List inside card ========= */
    .card-list {
        @apply divide-y divide-slate-200
        dark:divide-slate-800;
    }

    .card-list-item {
        @apply flex items-center justify-between gap-4 p-4;
    }

    .card-list-title {
        @apply text-sm font-semibold text-slate-900
        dark:text-slate-100;
    }

    .card-list-subtitle {
        @apply mt-1 text-xs text-slate-600
        dark:text-slate-400;
    }

    /* ========= Empty state ========= */
    .empty {
        @apply rounded-2xl border border-dashed border-slate-200 bg-white p-8 text-center
        dark:border-slate-800 dark:bg-slate-900;
    }

    .empty-title {
        @apply text-sm font-semibold text-slate-900
        dark:text-slate-100;
    }

    .empty-text {
        @apply mt-1 text-sm text-slate-600
        dark:text-slate-400;
    }

    .empty-actions {
        @apply mt-4 flex flex-col gap-2 sm:flex-row sm:justify-center;
    }
}