/* Modern UI Enhancement - Dark Mode Overrides */
/* This file is loaded as an alternate stylesheet with title="dark" */
/* It is toggled together with the main dark.css */

:root {
    --glass-bg: rgba(44, 42, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --glass-blur: blur(12px);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --glow-primary: 0 0 20px rgba(102, 126, 234, 0.2);
}

/* Dark mode header */
#header {
    background: linear-gradient(135deg, rgba(44, 42, 42, 0.85) 0%, rgba(30, 30, 40, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode footer */
footer {
    background: linear-gradient(135deg, rgba(44, 42, 42, 0.85) 0%, rgba(30, 30, 40, 0.9) 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode article items */
.article-item {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

.article-title a {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark mode PAP */
.PAP {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

.PAP-banner {
    background: linear-gradient(135deg, rgba(52, 50, 50, 0.8) 0%, rgba(40, 40, 50, 0.9) 100%);
}

.PAP-banner div h1 {
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark mode sidebar */
.sliderbar-content {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

#widgets .widget {
    /* background-color (not shorthand) — see comment in modern.css. */
    background-color: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

#widgets .widget-recent-comment .recent-comment-content {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

#widgets .widget-recent-comment {
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#widgets .widget-recent-comment:hover {
    transform: none;
    box-shadow: none;
}

.profile-content i {
    background: linear-gradient(135deg, rgba(52, 50, 50, 0.8) 0%, rgba(40, 40, 50, 0.9) 100%);
}

/* Dark mode toolbar */
.toolbar-btn {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode TOC */
#toc {
    background: rgba(44, 42, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

#toc-close {
    background: rgba(44, 42, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode comments */
.comment-content {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode pagination */
a.next,
a.prev {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08);
}

.page-navigator li a {
    background: rgba(44, 42, 42, 0.75);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode toast */
.g-toast {
    background: rgba(44, 42, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode OwO */
#OwO-container {
    background: rgba(44, 42, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Dark mode blockquote */
.PAP-content blockquote {
    background: rgba(56, 55, 55, 0.6);
}

/* Dark mode lightbox */
.lightbox-wrap {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Dark mode scrollbar */
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%) !important;
}

/* Dark mode selection */
::selection {
    background: rgba(102, 126, 234, 0.4);
}

::-moz-selection {
    background: rgba(102, 126, 234, 0.4);
}

/* Dark mode content language selector (Traditional/Simplified converter).
   The selector container already inherits --glass-bg from this file's :root,
   so it matches the card background. Here we only need to adjust the
   inner <select> control (text + border) so it doesn't read as bright white
   against the dark card. */
.content-lang-select {
    color: #ddd;
    border-color: rgba(255, 255, 255, 0.15);
    /* Re-encode the chevron with a lighter fill for visibility on dark bg. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbb' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.content-lang-select option {
    /* Native dropdown popup background — keep readable in dark mode. */
    background: #2c2a2a;
    color: #ddd;
}

/* ===== Modern Link Page - Dark Mode ===== */
/* The link_modern.php page carries its own scoped <style> block in the
   document body, which (being later in source order) would otherwise win
   ties against this stylesheet. The `html` prefix raises specificity so the
   dark overrides reliably apply to the link text and category titles. */
#link-modern .modern-link-card {
    background: rgba(30, 32, 44, 0.55);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html #link-modern .modern-link-name {
    color: rgba(255, 255, 255, 0.92);
}

html #link-modern .modern-link-description {
    color: rgba(255, 255, 255, 0.65);
}

#link-modern .modern-link-avatar {
    border-color: rgba(255, 255, 255, 0.15);
}

#link-modern .modern-link-empty {
    background: rgba(30, 32, 44, 0.55);
    color: rgba(255, 255, 255, 0.7);
}

html #link-modern .modern-link-section-title {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

html #link-modern .modern-link-section-count {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}

html #link-modern .modern-link-section.is-todo .modern-link-section-count {
    color: #fbbf24;
    background: rgba(234, 179, 8, 0.18);
}

html #link-modern .modern-link-section.is-lost .modern-link-section-count {
    color: #f87171;
    background: rgba(245, 87, 108, 0.18);
}

/* Display-mode dropdown popup options stay readable on dark backgrounds. */
html #link-modern .modern-link-select option {
    color: #ddd;
    background: #2c2a2a;
}