/* Custom styles for BetterOmni */

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Article card transitions */
.article-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.article-card.hidden-article {
    opacity: 0.6;
}

/* Feedback button active states */
.feedback-btn.active-up {
    color: #22c55e;
}

.feedback-btn.active-down {
    color: #ef4444;
}

/* HTMX loading indicator */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* Refresh button loading state */
.refresh-btn .refresh-spinner,
.refresh-btn .refresh-text-loading {
    display: none !important;
}

.refresh-btn.loading .refresh-icon,
.refresh-btn.loading .refresh-text {
    display: none !important;
}

.refresh-btn.loading .refresh-spinner,
.refresh-btn.loading .refresh-text-loading {
    display: inline-block !important;
}

/* Category filter button - subtle but always visible */
.category-filter-btn {
    opacity: 0.4;
}

.category-filter-btn:hover {
    opacity: 1;
}

/* Filter reason badge */
.filter-reason {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Scrollbar styling - dark mode */
.dark ::-webkit-scrollbar {
    width: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Scrollbar styling - light mode */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #e5e7eb;
}

::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Light mode overrides - !important needed to override Tailwind CDN */
html:not(.dark) body {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

html:not(.dark) .bg-omni-card {
    background-color: #ffffff !important;
}

html:not(.dark) .bg-omni-dark {
    background-color: #f3f4f6 !important;
}

html:not(.dark) .border-omni-border {
    border-color: #d1d5db !important;
}

html:not(.dark) .text-gray-200 {
    color: #374151 !important;
}

html:not(.dark) .text-gray-300 {
    color: #4b5563 !important;
}

html:not(.dark) .text-gray-400 {
    color: #6b7280 !important;
}

html:not(.dark) .text-gray-500 {
    color: #9ca3af !important;
}

html:not(.dark) .text-white {
    color: #111827 !important;
}

html:not(.dark) .bg-gray-700 {
    background-color: #e5e7eb !important;
}

html:not(.dark) .bg-gray-800\/50 {
    background-color: rgba(229, 231, 235, 0.5) !important;
}

html:not(.dark) .hover\:bg-gray-600:hover {
    background-color: #d1d5db !important;
}

html:not(.dark) .hover\:bg-gray-700\/50:hover {
    background-color: rgba(209, 213, 219, 0.5) !important;
}

/* Modal backdrop in light mode */
html:not(.dark) .bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Read articles in light mode - stronger dimming */
html:not(.dark) .opacity-60 {
    opacity: 0.4 !important;
}