/* Article Page Dark Mode - Unified Styling */

/* LIGHT MODE (Default) - No !important so dark mode can override */
.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #000000;
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 10px;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
.article-content p,
.article-content li,
.article-content span,
.article-content div,
.article-content strong,
.article-content em,
.article-content b,
.article-content i {
    color: #000000;
}

.main-container,
.article-main-container {
    background-color: #ffffff;
}

.article-meta,
.reaction-toolbar,
.comments-section,
.comment-form,
.comment-item,
.mobile-reactions,
.story-reactions-bar,
.universal-comments-section {
    background-color: #ffffff;
}

.article-meta *,
.comments-section *,
.comment-form *,
.comment-item *,
.mobile-reactions *,
.story-reactions-bar *,
.universal-comments-section * {
    color: #000000;
}

.form-control,
.form-select,
input,
textarea {
    background-color: #ffffff;
    color: #000000;
    border-color: #dee2e6;
}

.card {
    background-color: #ffffff;
}

.card *,
.card h3,
.card h4,
.card h5,
.card p,
.card label {
    color: #000000;
}

/* DARK MODE - System preference */
@media (prefers-color-scheme: dark) {
    .main-container,
    .article-main-container {
        background-color: #000000 !important;
    }
    
    .article-content {
        color: #ffffff !important;
        background-color: #000000 !important;
    }
    
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6,
    .article-content p,
    .article-content li,
    .article-content span,
    .article-content div,
    .article-content strong,
    .article-content em,
    .article-content b,
    .article-content i {
        color: #ffffff !important;
    }
    
    .article-meta,
    .reaction-toolbar,
    .comments-section,
    .sidebar-widget,
    .story-reactions-bar,
    .universal-comments-section {
        background-color: #1a1a1a !important;
    }
    
    .article-meta *,
    .comments-section *,
    .comments-section input,
    .comments-section textarea,
    .comments-section label,
    .comments-section h3,
    .comments-section h4,
    .comments-section h5,
    .sidebar-widget *,
    .sidebar-widget h5,
    .sidebar-widget p,
    .sidebar-widget label,
    .story-reactions-bar *,
    .universal-comments-section *,
    .universal-comments-section h4,
    .universal-comments-section h6,
    .universal-comments-section label {
        color: #ffffff !important;
    }
    
    .comment-form,
    .comment-item,
    #insightsCommentForm,
    #universalCommentForm,
    #newsletter-form {
        background-color: #2a2a2a !important;
    }
    
    .comment-form *,
    .comment-form input,
    .comment-form textarea,
    .comment-form label,
    .comment-form h4,
    .comment-item *,
    #insightsCommentForm *,
    #insightsCommentForm input,
    #insightsCommentForm textarea,
    #insightsCommentForm label,
    #universalCommentForm *,
    #universalCommentForm input,
    #universalCommentForm textarea,
    #universalCommentForm label {
        color: #ffffff !important;
    }
    
    .mobile-reactions {
        background-color: #1a1a1a !important;
    }
    
    .mobile-reactions * {
        color: #ffffff !important;
    }
    
    .card {
        background-color: #1a1a1a !important;
    }
    
    .card *,
    .card h3,
    .card h4,
    .card h5,
    .card p,
    .card label {
        color: #ffffff !important;
    }
    
    .form-control,
    .form-select,
    input[type="text"],
    input[type="email"],
    textarea {
        background-color: #2a2a2a !important;
        color: #ffffff !important;
        border-color: #444 !important;
    }
    
    input::placeholder,
    textarea::placeholder {
        color: #888 !important;
    }
    
    /* Bootstrap utility classes override for dark mode */
    .text-muted {
        color: #adb5bd !important;
    }
    
    .text-primary {
        color: #6ea8fe !important;
    }
    
    /* Breadcrumb override */
    .breadcrumb-item,
    .breadcrumb-item a {
        color: #ffffff !important;
    }
    
    .breadcrumb-item.active {
        color: #adb5bd !important;
    }
}

/* Bootstrap dark theme specific */
[data-bs-theme="dark"] .main-container,
[data-bs-theme="dark"] .article-main-container {
    background-color: #000000 !important;
}

[data-bs-theme="dark"] .article-content {
    color: #ffffff !important;
    background-color: #000000 !important;
}

[data-bs-theme="dark"] .article-content h1,
[data-bs-theme="dark"] .article-content h2,
[data-bs-theme="dark"] .article-content h3,
[data-bs-theme="dark"] .article-content h4,
[data-bs-theme="dark"] .article-content h5,
[data-bs-theme="dark"] .article-content h6,
[data-bs-theme="dark"] .article-content p,
[data-bs-theme="dark"] .article-content li,
[data-bs-theme="dark"] .article-content span,
[data-bs-theme="dark"] .article-content div,
[data-bs-theme="dark"] .article-content strong,
[data-bs-theme="dark"] .article-content em,
[data-bs-theme="dark"] .article-content b,
[data-bs-theme="dark"] .article-content i {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .article-meta,
[data-bs-theme="dark"] .reaction-toolbar,
[data-bs-theme="dark"] .comments-section,
[data-bs-theme="dark"] .sidebar-widget,
[data-bs-theme="dark"] .story-reactions-bar,
[data-bs-theme="dark"] .universal-comments-section {
    background-color: #1a1a1a !important;
}

[data-bs-theme="dark"] .article-meta *,
[data-bs-theme="dark"] .comments-section *,
[data-bs-theme="dark"] .comments-section input,
[data-bs-theme="dark"] .comments-section textarea,
[data-bs-theme="dark"] .comments-section label,
[data-bs-theme="dark"] .comments-section h3,
[data-bs-theme="dark"] .comments-section h4,
[data-bs-theme="dark"] .comments-section h5,
[data-bs-theme="dark"] .sidebar-widget *,
[data-bs-theme="dark"] .sidebar-widget h5,
[data-bs-theme="dark"] .sidebar-widget p,
[data-bs-theme="dark"] .sidebar-widget label,
[data-bs-theme="dark"] .story-reactions-bar *,
[data-bs-theme="dark"] .universal-comments-section *,
[data-bs-theme="dark"] .universal-comments-section h4,
[data-bs-theme="dark"] .universal-comments-section h6,
[data-bs-theme="dark"] .universal-comments-section label {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .comment-form,
[data-bs-theme="dark"] .comment-item,
[data-bs-theme="dark"] #insightsCommentForm,
[data-bs-theme="dark"] #universalCommentForm,
[data-bs-theme="dark"] #newsletter-form {
    background-color: #2a2a2a !important;
}

[data-bs-theme="dark"] .comment-form *,
[data-bs-theme="dark"] .comment-form input,
[data-bs-theme="dark"] .comment-form textarea,
[data-bs-theme="dark"] .comment-form label,
[data-bs-theme="dark"] .comment-form h4,
[data-bs-theme="dark"] .comment-item *,
[data-bs-theme="dark"] #insightsCommentForm *,
[data-bs-theme="dark"] #insightsCommentForm input,
[data-bs-theme="dark"] #insightsCommentForm textarea,
[data-bs-theme="dark"] #insightsCommentForm label,
[data-bs-theme="dark"] #universalCommentForm *,
[data-bs-theme="dark"] #universalCommentForm input,
[data-bs-theme="dark"] #universalCommentForm textarea,
[data-bs-theme="dark"] #universalCommentForm label {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .mobile-reactions {
    background-color: #1a1a1a !important;
}

[data-bs-theme="dark"] .mobile-reactions * {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .card {
    background-color: #1a1a1a !important;
}

[data-bs-theme="dark"] .card *,
[data-bs-theme="dark"] .card h3,
[data-bs-theme="dark"] .card h4,
[data-bs-theme="dark"] .card h5,
[data-bs-theme="dark"] .card p,
[data-bs-theme="dark"] .card label {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] input[type="text"],
[data-bs-theme="dark"] input[type="email"],
[data-bs-theme="dark"] textarea {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border-color: #444 !important;
}

[data-bs-theme="dark"] input::placeholder,
[data-bs-theme="dark"] textarea::placeholder {
    color: #888 !important;
}

/* Bootstrap utility classes override for dark mode */
[data-bs-theme="dark"] .text-muted {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .text-primary {
    color: #6ea8fe !important;
}

/* Breadcrumb override */
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item a {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: #adb5bd !important;
}