/**
 * Javo Favorites CSS
 * Modern styling with Tailwind-inspired utilities
 */

/* Favorite Button Styles - Moved to Tailwind in FavoriteButton.php */

/* Keep meta action icon spacing compact for the favorite trigger */
.javo-post-meta-action-item .javo-favorite .favorite-button-inner {
    gap: 0;
}

.javo-favorite .favorite-count--spaced {
    margin-left: 0.5rem;
}

.javo-post-meta-action-item .javo-favorite .favorite-visual {
    width: var(--javo-meta-action-icon-size, 1.125rem);
    height: var(--javo-meta-action-icon-size, 1.125rem);
}

/* Favorites dropdown listing type tab rail */
[data-javo-favorites-tab-scroller] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[data-javo-favorites-tab-scroller]::-webkit-scrollbar {
    display: none;
}

[data-javo-dashboard-tab-scroller] {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[data-javo-dashboard-tab-scroller]::-webkit-scrollbar {
    display: none;
}

/* Keep favorites dropdown thumbnails square even when global img rules force height:auto. */
[data-javo-favorites-widget] .favorite-dropdown-item .favorite-dropdown-thumbnail {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

[data-javo-favorites-widget] .favorite-dropdown-item .favorite-dropdown-thumbnail > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* User Favorites Widget */
.javo-user-favorites-widget {
    @apply w-full;
}

.favorites-grid {
    @apply grid gap-4;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.favorite-item {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
    @apply hover:shadow-md transition-shadow duration-200;
}

.favorite-thumbnail {
    @apply relative overflow-hidden;
    aspect-ratio: 16/9;
}

.favorite-thumbnail img {
    @apply w-full h-full object-cover;
}

.favorite-content {
    @apply p-4;
}

.favorite-title {
    @apply text-lg font-semibold mb-2;
}

.favorite-title a {
    @apply text-gray-900 hover:text-blue-600 transition-colors duration-200;
    text-decoration: none;
}

.favorite-title a:hover {
    text-decoration: none;
}

.favorite-date {
    @apply text-sm text-gray-500 mb-3;
}

.favorite-actions {
    @apply flex gap-2;
}

.remove-favorite {
    @apply inline-flex items-center gap-2 px-3 py-1 text-sm;
    @apply bg-red-50 hover:bg-red-100 text-red-600 hover:text-red-700;
    @apply border border-red-200 rounded-md;
    @apply transition-all duration-200 cursor-pointer;
}

.remove-favorite:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.remove-favorite.loading {
    @apply opacity-75 cursor-not-allowed;
    pointer-events: none;
}

/* Empty state */
.no-favorites {
    @apply text-center py-12;
}

.no-favorites p {
    @apply text-gray-500 text-lg;
}

.javo-favorites-login-required {
    @apply text-center py-12;
}

.javo-favorites-login-required p {
    @apply text-gray-500 text-lg;
}

/* Notification styles */
.javo-notification {
    @apply fixed top-4 right-4 z-50 px-6 py-3 rounded-lg shadow-lg;
    @apply text-white font-medium;
    display: none;
    max-width: 400px;
}

.javo-notification.success {
    @apply bg-green-500;
}

.javo-notification.error {
    @apply bg-red-500;
}

.javo-notification.warning {
    @apply bg-yellow-500;
}

.javo-notification.info {
    @apply bg-blue-500;
}

/* Responsive design */
@media (max-width: 768px) {
    .favorites-grid {
        grid-template-columns: 1fr;
    }
    
    .javo-favorite {
        @apply px-3 py-2 text-sm;
    }
    
    .favorite-content {
        @apply p-3;
    }
    
    .favorite-title {
        @apply text-base;
    }
}

/* Animation keyframes */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .favorite-item {
        @apply bg-gray-800 border-gray-700;
    }
    
    .favorite-title a {
        @apply text-gray-100 hover:text-blue-400;
    }
    
    .favorite-date {
        @apply text-gray-400;
    }
    
    .no-favorites p,
    .javo-favorites-login-required p {
        @apply text-gray-400;
    }
}