/**
 * Ultra-Premium Article Reading Experience
 * Power of Knowledge - AI-Powered Academic Journal
 * Quantum Twilight Dark Theme for Article Pages
 * 
 * This stylesheet provides dark theme overrides for the article reading page.
 * Apply class 'up-dark-reading' to body to activate.
 */

/* ============================================
   Dark Reading Mode Base
   ============================================ */

.page-article.up-dark-reading,
.page-article.ultra-premium {
    background: var(--void-black, #0a0a0f) !important;
    color: var(--platinum, #e5e7eb);
}

.page-article.up-dark-reading .bg-gray-50,
.page-article.ultra-premium .bg-gray-50 {
    background: var(--void-black, #0a0a0f) !important;
}

.page-article.up-dark-reading .bg-white,
.page-article.ultra-premium .bg-white {
    background: var(--anthracite, #1a1a2e) !important;
}

/* ============================================
   Article Header
   ============================================ */

.page-article.up-dark-reading header,
.page-article.ultra-premium header {
    background: linear-gradient(180deg, var(--anthracite, #1a1a2e) 0%, var(--void-black, #0a0a0f) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-article.up-dark-reading .text-dark,
.page-article.ultra-premium .text-dark {
    color: var(--platinum, #e5e7eb) !important;
}

.page-article.up-dark-reading .text-muted,
.page-article.ultra-premium .text-muted {
    color: var(--silver, #9ca3af) !important;
}

.page-article.up-dark-reading h1,
.page-article.ultra-premium h1 {
    color: var(--platinum, #e5e7eb) !important;
}

/* ============================================
   Sticky Header
   ============================================ */

.page-article.up-dark-reading #articleStickyHeader,
.page-article.ultra-premium #articleStickyHeader {
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-article.up-dark-reading #articleStickyHeader .text-dark,
.page-article.ultra-premium #articleStickyHeader .text-dark {
    color: var(--platinum, #e5e7eb) !important;
}

/* ============================================
   Author Badges
   ============================================ */

.page-article.up-dark-reading .bg-light,
.page-article.ultra-premium .bg-light {
    background: var(--graphite, #252540) !important;
}

.page-article.up-dark-reading .text-dark-80,
.page-article.ultra-premium .text-dark-80 {
    color: var(--platinum, #e5e7eb) !important;
}

/* ============================================
   Content Cards (Abstract, Keywords, etc.)
   ============================================ */

.page-article.up-dark-reading .calm-card,
.page-article.ultra-premium .calm-card {
    background: var(--anthracite, #1a1a2e) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.page-article.up-dark-reading .calm-card h2,
.page-article.ultra-premium .calm-card h2 {
    color: var(--platinum, #e5e7eb) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-article.up-dark-reading .calm-card p,
.page-article.ultra-premium .calm-card p {
    color: var(--silver, #9ca3af) !important;
}

/* ============================================
   Keywords
   ============================================ */

.page-article.up-dark-reading .bg-primary\/10,
.page-article.ultra-premium .bg-primary\/10 {
    background: rgba(0, 212, 255, 0.1) !important;
}

.page-article.up-dark-reading .text-primary,
.page-article.ultra-premium .text-primary {
    color: var(--quantum-blue, #00d4ff) !important;
}

/* ============================================
   Sidebar
   ============================================ */

.page-article.up-dark-reading aside .calm-card,
.page-article.ultra-premium aside .calm-card {
    background: var(--anthracite, #1a1a2e) !important;
}

.page-article.up-dark-reading .border-light,
.page-article.ultra-premium .border-light {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   Buttons
   ============================================ */

.page-article.up-dark-reading .btn-calm-outline,
.page-article.ultra-premium .btn-calm-outline {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--silver, #9ca3af) !important;
}

.page-article.up-dark-reading .btn-calm-outline:hover,
.page-article.ultra-premium .btn-calm-outline:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--platinum, #e5e7eb) !important;
}

.page-article.up-dark-reading .btn-calm-secondary,
.page-article.ultra-premium .btn-calm-secondary {
    background: var(--graphite, #252540) !important;
    color: var(--platinum, #e5e7eb) !important;
}

/* ============================================
   Links
   ============================================ */

.page-article.up-dark-reading a,
.page-article.ultra-premium a {
    color: var(--quantum-blue, #00d4ff);
}

.page-article.up-dark-reading a:hover,
.page-article.ultra-premium a:hover {
    color: var(--neural-purple, #8b5cf6);
}

/* ============================================
   Code Blocks
   ============================================ */

.page-article.up-dark-reading pre,
.page-article.up-dark-reading code,
.page-article.ultra-premium pre,
.page-article.ultra-premium code {
    background: var(--graphite, #252540) !important;
    color: var(--quantum-blue, #00d4ff) !important;
}

/* ============================================
   Tables
   ============================================ */

.page-article.up-dark-reading table,
.page-article.ultra-premium table {
    background: var(--anthracite, #1a1a2e);
    border-color: rgba(255, 255, 255, 0.08);
}

.page-article.up-dark-reading th,
.page-article.ultra-premium th {
    background: var(--graphite, #252540);
    color: var(--platinum, #e5e7eb);
}

.page-article.up-dark-reading td,
.page-article.ultra-premium td {
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--silver, #9ca3af);
}

/* ============================================
   Badges
   ============================================ */

.page-article.up-dark-reading .badge-calm,
.page-article.ultra-premium .badge-calm {
    background: rgba(0, 212, 255, 0.15) !important;
    color: var(--quantum-blue, #00d4ff) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

/* ============================================
   Reading Line Highlight
   ============================================ */

.page-article.up-dark-reading .reading-highlight,
.page-article.ultra-premium .reading-highlight {
    background: rgba(0, 212, 255, 0.1);
    border-left: 3px solid var(--quantum-blue, #00d4ff);
}

/* ============================================
   PDF Preview Modal
   ============================================ */

.page-article.up-dark-reading #pdfPreviewModal,
.page-article.ultra-premium #pdfPreviewModal {
    background: rgba(10, 10, 15, 0.95);
}

/* ============================================
   Related Articles
   ============================================ */

.page-article.up-dark-reading .related-article,
.page-article.ultra-premium .related-article {
    background: var(--anthracite, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.page-article.up-dark-reading .related-article:hover,
.page-article.ultra-premium .related-article:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Scrollbar
   ============================================ */

.page-article.up-dark-reading::-webkit-scrollbar,
.page-article.ultra-premium::-webkit-scrollbar {
    width: 8px;
}

.page-article.up-dark-reading::-webkit-scrollbar-track,
.page-article.ultra-premium::-webkit-scrollbar-track {
    background: var(--void-black, #0a0a0f);
}

.page-article.up-dark-reading::-webkit-scrollbar-thumb,
.page-article.ultra-premium::-webkit-scrollbar-thumb {
    background: var(--graphite, #252540);
    border-radius: 4px;
}

/* ============================================
   Auto-Enable Dark Mode (Optional)
   Uncomment to always apply dark theme to articles
   ============================================ */

/*
.page-article {
    background: var(--void-black, #0a0a0f) !important;
}
*/