/**
 * Dark Mode Support for Article Listing Components
 * Requirements: 12.2
 * 
 * Features:
 * - Dark mode CSS variables
 * - Dark mode styles for all article listing components
 * - Controlled by data-theme attribute
 */

[data-theme="dark"] {
    /* ============================================
       Hero Section Dark Mode
       ============================================ */
    
    .article-hero {
        background: #1f2937;
    }
    
    .article-hero__content {
        background: rgba(17, 24, 39, 0.95);
    }
    
    .article-hero__title {
        color: #f9fafb;
    }
    
    .article-hero__excerpt {
        color: #d1d5db;
    }
    
    .article-hero__meta {
        color: #9ca3af;
    }
    
    .article-hero__gradient {
        background: linear-gradient(to top, rgba(17, 24, 39, 0.9), transparent);
    }
    
    /* ============================================
       Category Hero Dark Mode
       ============================================ */
    
    .category-hero {
        background: #1f2937;
        border-bottom: 1px solid #374151;
    }
    
    .category-hero__title {
        color: #f9fafb;
    }
    
    .category-hero__description {
        color: #d1d5db;
    }
    
    .stat__value {
        color: #f9fafb;
    }
    
    .stat__label {
        color: #9ca3af;
    }
    
    /* ============================================
       Articles Grid Dark Mode
       ============================================ */
    
    .articles-grid {
        background: transparent;
    }
    
    /* ============================================
       Content Card Dark Mode
       ============================================ */
    
    .content-card {
        background: #1f2937;
        border-color: #374151;
    }
    
    .content-card:hover {
        background: #2d3748;
        border-color: #4b5563;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }
    
    .content-card__title {
        color: #f9fafb;
    }
    
    .content-card__excerpt {
        color: #d1d5db;
    }
    
    .content-card__meta {
        color: #9ca3af;
    }
    
    .content-card__author-name {
        color: #e5e7eb;
    }
    
    /* ============================================
       Filter UI Dark Mode
       ============================================ */
    
    .article-filters {
        background: #1f2937;
        border-color: #374151;
    }
    
    .article-filters__search-input {
        background: #111827;
        border-color: #374151;
        color: #f9fafb;
    }
    
    .article-filters__search-input::placeholder {
        color: #6b7280;
    }
    
    .article-filters__search-input:focus {
        border-color: #6366f1;
        background: #1f2937;
    }
    
    .filter-tab {
        color: #9ca3af;
        background: transparent;
    }
    
    .filter-tab:hover {
        background: #374151;
        color: #f9fafb;
    }
    
    .filter-tab.active {
        background: #6366f1;
        color: #ffffff;
    }
    
    .filter-chip {
        background: #374151;
        color: #e5e7eb;
        border-color: #4b5563;
    }
    
    .filter-chip__remove {
        color: #9ca3af;
    }
    
    .filter-chip__remove:hover {
        color: #f9fafb;
        background: #4b5563;
    }
    
    .filter-sort {
        background: #111827;
        border-color: #374151;
        color: #f9fafb;
    }
    
    .article-filters__results {
        color: #9ca3af;
    }
    
    /* ============================================
       Sidebar Dark Mode
       ============================================ */
    
    .articles-sidebar-enhanced {
        background: transparent;
    }
    
    .sidebar-box {
        background: #1f2937;
        border-color: #374151;
    }
    
    .sidebar-box__title {
        color: #f9fafb;
    }
    
    .category-link {
        color: #d1d5db;
    }
    
    .category-link:hover {
        background: #374151;
        color: #f9fafb;
    }
    
    .category-link--active {
        background: rgba(99, 102, 241, 0.2);
        color: #818cf8;
    }
    
    .category-link__count {
        background: #374151;
        color: #9ca3af;
    }
    
    .category-link--active .category-link__count {
        background: rgba(99, 102, 241, 0.3);
        color: #a5b4fc;
    }
    
    .tag {
        background: #374151;
        color: #d1d5db;
    }
    
    .tag:hover {
        background: #4b5563;
        color: #f9fafb;
    }
    
    .trending-item {
        border-color: #374151;
    }
    
    .trending-item:hover {
        background: #374151;
    }
    
    .trending-item__title {
        color: #e5e7eb;
    }
    
    .trending-item__meta {
        color: #9ca3af;
    }
    
    .newsletter-form__input {
        background: #111827;
        border-color: #374151;
        color: #f9fafb;
    }
    
    .newsletter-form__input::placeholder {
        color: #6b7280;
    }
    
    .newsletter-form__input:focus {
        border-color: #6366f1;
        background: #1f2937;
    }
    
    .newsletter-form__privacy {
        color: #9ca3af;
    }
    
    /* ============================================
       View Switcher Dark Mode
       ============================================ */
    
    .view-switcher {
        background: #1f2937;
        border-color: #374151;
    }
    
    .view-switcher__label {
        color: #9ca3af;
    }
    
    .view-switcher__buttons {
        background: #111827;
    }
    
    .view-switcher__button {
        color: #9ca3af;
    }
    
    .view-switcher__button:hover {
        background: #374151;
        color: #f9fafb;
    }
    
    .view-switcher__button--active {
        background: #6366f1;
        color: #ffffff;
    }
    
    /* ============================================
       Mobile Components Dark Mode
       ============================================ */
    
    .mobile-filter-bar {
        background: #1f2937;
        border-color: #374151;
    }
    
    .mobile-filter-bar__results {
        color: #d1d5db;
    }
    
    .mobile-filter-bar__sort {
        background: #111827;
        border-color: #374151;
        color: #f9fafb;
    }
    
    .mobile-category-chip {
        background: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }
    
    .mobile-category-chip.active {
        background: var(--category-color);
        color: #ffffff;
    }
    
    .mobile-filter-sheet {
        background: #1f2937;
    }
    
    .mobile-filter-sheet__header {
        border-color: #374151;
    }
    
    .mobile-filter-sheet__title {
        color: #f9fafb;
    }
    
    .mobile-filter-sheet__close {
        color: #9ca3af;
    }
    
    .mobile-filter-sheet__close:hover {
        color: #f9fafb;
        background: #374151;
    }
    
    .mobile-floating-filter-button {
        background: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
    
    .mobile-floating-filter-button:hover {
        background: #4f46e5;
    }
    
    /* ============================================
       Skeleton Loaders Dark Mode
       ============================================ */
    
    .article-skeleton .skeleton {
        background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
        background-size: 1000px 100%;
    }
    
    /* ============================================
       Empty State Dark Mode
       ============================================ */
    
    .articles-empty-state {
        background: #1f2937;
        border-color: #374151;
    }
    
    .articles-empty-state__title {
        color: #f9fafb;
    }
    
    .articles-empty-state__message {
        color: #9ca3af;
    }
    
    /* ============================================
       Pagination Dark Mode
       ============================================ */
    
    .pagination {
        background: transparent;
    }
    
    .pagination a,
    .pagination span {
        background: #1f2937;
        border-color: #374151;
        color: #d1d5db;
    }
    
    .pagination a:hover {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .pagination .active span {
        background: #6366f1;
        border-color: #6366f1;
        color: #ffffff;
    }
    
    .pagination .disabled span {
        background: #1f2937;
        border-color: #374151;
        color: #6b7280;
    }
    
    /* ============================================
       Load More Button Dark Mode
       ============================================ */
    
    .load-more-button {
        background: #1f2937;
        border-color: #374151;
        color: #d1d5db;
    }
    
    .load-more-button:hover {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .load-more-button:disabled {
        background: #1f2937;
        border-color: #374151;
        color: #6b7280;
    }
    
    /* ============================================
       Pagination Mode Toggle Dark Mode
       ============================================ */
    
    .pagination-mode-toggle {
        background: #1f2937;
        border-color: #374151;
    }
    
    .pagination-mode-toggle__button {
        color: #9ca3af;
    }
    
    .pagination-mode-toggle__button:hover {
        background: #374151;
        color: #f9fafb;
    }
    
    .pagination-mode-toggle__button--active {
        background: #6366f1;
        color: #ffffff;
    }
    
    /* ============================================
       Personalization Components Dark Mode
       ============================================ */
    
    .articles-for-you,
    .articles-continue-reading,
    .articles-reading-history {
        background: #1f2937;
        border-color: #374151;
    }
    
    .articles-for-you__title,
    .articles-continue-reading__title,
    .articles-reading-history__title {
        color: #f9fafb;
    }
    
    .articles-for-you__subtitle,
    .articles-continue-reading__subtitle {
        color: #9ca3af;
    }
    
    .progress-bar {
        background: #374151;
    }
    
    .progress-bar__fill {
        background: #6366f1;
    }
    
    /* ============================================
       General Page Elements Dark Mode
       ============================================ */
    
    .page-header {
        background: transparent;
    }
    
    .page-title {
        color: #f9fafb;
    }
    
    .page-subtitle {
        color: #d1d5db;
    }
    
    .articles-layout {
        background: transparent;
    }
    
    /* ============================================
       Button Overrides for Dark Mode
       ============================================ */
    
    .btn--outline {
        border-color: #374151;
        color: #d1d5db;
    }
    
    .btn--outline:hover {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }
    
    .btn--ghost {
        color: #9ca3af;
    }
    
    .btn--ghost:hover {
        background: #374151;
        color: #f9fafb;
    }
}