.favorite-btn {
    @apply inline-flex items-center justify-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-200;
    @apply bg-transparent border border-jm-dark-border text-jm-text-secondary;
    @apply hover:border-red-400 hover:text-red-400 hover:bg-red-400 hover:bg-opacity-10;
    @apply focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-20;
}

.favorite-btn.is-favorite {
    @apply border-red-500 text-red-500 bg-red-500 bg-opacity-10;
}

.favorite-btn.is-favorite:hover {
    @apply border-red-600 text-red-600 bg-red-600 bg-opacity-20;
}

.favorite-btn--small {
    @apply px-2 py-1 text-xs;
}

.favorite-btn--small .favorite-icon svg {
    @apply w-4 h-4;
}

.favorite-btn .favorite-icon {
    @apply transition-transform duration-200;
}

.favorite-btn:hover .favorite-icon {
    @apply transform scale-110;
}

.favorite-btn.is-favorite .favorite-icon {
    @apply text-red-500;
}

.job-card .favorite-btn {
    @apply absolute top-4 right-4 p-2 bg-jm-dark-surface bg-opacity-90 backdrop-blur-sm;
    @apply border-jm-dark-border hover:bg-opacity-100;
}

.favorites-counter {
    @apply inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-bold;
    @apply bg-red-500 text-white rounded-full;
}

.favorite-badge {
    @apply inline-flex items-center px-2 py-1 text-xs font-medium;
    @apply bg-red-100 text-red-800 rounded-full;
}

.dark .favorite-badge {
    @apply bg-red-900 bg-opacity-30 text-red-400;
}

.favorites-list {
    @apply space-y-4;
}

.favorites-list-item {
    @apply flex items-center justify-between p-4 bg-jm-dark-surface rounded-lg border border-jm-dark-border;
    @apply hover:border-jm-accent-blue transition-colors duration-200;
}

.favorites-list-item__content {
    @apply flex-1 min-w-0;

}

.favorites-list-item__title {
    @apply font-medium text-jm-text-primary truncate;
}

.favorites-list-item__meta {
    @apply text-sm text-jm-text-secondary mt-1;
}

.favorites-list-item__actions {
    @apply flex items-center space-x-2 ml-4;
}

/* État vide des favoris */
.favorites-empty {
    @apply text-center py-12;
}

.favorites-empty__icon {
    @apply w-16 h-16 mx-auto text-jm-text-muted mb-4;
}

.favorites-empty__title {
    @apply text-lg font-medium text-jm-text-primary mb-2;
}

.favorites-empty__description {
    @apply text-jm-text-secondary;
}

/* Notifications */
.favorite-notification {
    @apply fixed top-4 right-4 z-50 max-w-sm;
    @apply bg-white border border-gray-200 rounded-lg shadow-lg;
    @apply transform translate-x-full transition-transform duration-300 ease-in-out;
}

.favorite-notification--success {
    @apply border-green-200 bg-green-50;
}

.favorite-notification--info {
    @apply border-blue-200 bg-blue-50;
}

.favorite-notification--error {
    @apply border-red-200 bg-red-50;
}

.favorite-notification__content {
    @apply flex items-center p-4;
}

.favorite-notification__icon {
    @apply flex-shrink-0 w-5 h-5 mr-3;
}

.favorite-notification--success .favorite-notification__icon {
    @apply text-green-600;
}

.favorite-notification--info .favorite-notification__icon {
    @apply text-blue-600;
}

.favorite-notification--error .favorite-notification__icon {
    @apply text-red-600;
}

.favorite-notification__message {
    @apply text-sm font-medium;
}

.favorite-notification--success .favorite-notification__message {
    @apply text-green-800;
}

.favorite-notification--info .favorite-notification__message {
    @apply text-blue-800;
}

.favorite-notification--error .favorite-notification__message {
    @apply text-red-800;
}

/* Dark mode pour les notifications */
.dark .favorite-notification {
    @apply bg-jm-dark-surface border-jm-dark-border;
}

.dark .favorite-notification--success {
    @apply border-green-800 bg-green-900 bg-opacity-20;
}

.dark .favorite-notification--info {
    @apply border-blue-800 bg-blue-900 bg-opacity-20;
}

.dark .favorite-notification--error {
    @apply border-red-800 bg-red-900 bg-opacity-20;
}

.dark .favorite-notification__message {
    @apply text-jm-text-primary;
}

/* Responsive */
@media (max-width: 640px) {
    .favorite-notification {
        @apply left-4 right-4 max-w-none;
    }

    .job-card .favorite-btn {
        @apply top-2 right-2 p-1.5;
    }

    .favorite-btn .favorite-text {
        @apply hidden;
    }
}

/* Animation de pulsation pour attirer l'attention */
@keyframes favorite-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.favorite-btn--pulse {
    animation: favorite-pulse 2s infinite;
}

/* Transition fluide pour l'ajout/suppression */
.favorite-btn .favorite-icon svg {
    transition: all 0.2s ease;
}

.favorite-btn.is-favorite .favorite-icon svg {
    fill: currentColor;
    stroke: none;
}

/* Hover effects spéciaux */
.favorite-btn:not(.is-favorite):hover .favorite-icon svg {
    stroke-width: 2.5;
}

/* Focus visible pour l'accessibilité */
.favorite-btn:focus-visible {
    @apply ring-2 ring-red-400 ring-opacity-50 ring-offset-2 ring-offset-jm-dark-surface;
}

/* Styles pour les boutons favoris avec état is-favorite */
.favorite-btn.is-favorite {
    @apply border-red-500 text-red-500 bg-red-500 bg-opacity-10;
}

.favorite-btn.is-favorite:hover {
    @apply border-red-600 text-red-600 bg-red-600 bg-opacity-20;
}

.favorite-btn.is-favorite .favorite-icon svg {
    fill: currentColor;
    stroke: none;
}