/**
 * Componente: Card
 * Descrição: Cartão de conteúdo para menus e dashboards.
 * Autor: Kennedy Arantes
 * Data: 2025-10-27
 */

/* === Base do Card === */
.card {
    @apply
        relative
        flex flex-col
        min-w-[280px] max-w-full md:max-w-[350px] /* Largura responsiva */
        p-6
        bg-white dark:bg-neutral-800
        border border-neutral-200 dark:border-neutral-700
        rounded-lg
        shadow-md
        transition-all duration-200 ease-in-out;
}

/* === Estados Interativos === */
.card:hover, .card:focus-within {
    @apply
        transform -translate-y-1 scale-[1.02]
        shadow-lg;
}

.card:focus-within {
    @apply
        ring-2 ring-accent-300 ring-offset-2;
}

/* === Header === */
.card__header {
    @apply
        flex items-center justify-center
        mb-4;
}

.card__icon {
    @apply
        text-4xl leading-none text-neutral-600 dark:text-neutral-400;
}

/* === Corpo === */
.card__body {
    @apply
        flex-1 flex flex-col gap-2;
}

.card__title {
    @apply
        text-base font-semibold text-neutral-800 dark:text-neutral-100
        leading-snug;
}

.card__description {
    @apply
        text-sm text-neutral-600 dark:text-neutral-300
        leading-normal;
}

/* === Footer === */
.card__footer {
    @apply
        mt-4 pt-4
        border-t border-neutral-200 dark:border-neutral-700;
}

.card__action {
    @apply
        inline-block w-full
        px-4 py-2.5
        text-center text-sm font-medium text-white
        bg-accent-300 hover:bg-accent-400
        rounded-md
        transition-colors duration-200
        focus:outline-none focus:ring-2 focus:ring-accent-400 focus:ring-offset-2;
}

/* === Badge === */
.card__badge {
    @apply
        absolute top-3 right-3
        px-2.5 py-1
        text-xs font-semibold uppercase
        rounded-full
        letter-spacing-wide;
}

.card__badge--servico {
    @apply
        bg-blue-100 text-blue-800
        dark:bg-blue-900 dark:text-blue-200;
}

.card__badge--relatorio {
    @apply
        bg-yellow-100 text-yellow-800
        dark:bg-yellow-900 dark:text-yellow-200;
}

/* === Variações === */
.card--compact {
    @apply p-4;
}

.card--wide {
    @apply max-w-full;
}

.card--highlight {
    @apply border-2 border-accent-300 dark:border-accent-400;
}