/* Dark Mode Styles */

/* Theme toggle button */
.theme-toggle {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 0.5rem;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(20deg) scale(1.1);
}

.theme-toggle:active {
    transform: rotate(20deg) scale(0.95);
}

.theme-toggle svg {
    transition: transform 0.3s ease;
}

/* Smooth theme transition */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body, header, footer, .container, .post-column, .aside-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode color scheme */
.dark-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --accent-color: #60a5fa;
    --accent-hover: #93c5fd;
}

/* Body and main containers */
.dark-mode body {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: var(--text-primary);
}

.dark-mode .container {
    background: transparent;
}

/* Header */
.dark-mode header {
    background: linear-gradient(135deg, #1e293b, #334155, #1e3a8a) !important;
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .nav-logo,
.dark-mode .nav-logo a {
    color: var(--text-primary) !important;
}

.dark-mode nav a {
    color: var(--text-primary) !important;
}

.dark-mode nav a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--accent-hover) !important;
}

.dark-mode nav a.active {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Search */
.dark-mode .search-container input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .search-container input::placeholder {
    color: var(--text-muted);
}

.dark-mode .search-container input:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--accent-color) !important;
}

/* Sub navigation */
.dark-mode .sports-subnav {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .subnav-title {
    color: var(--accent-color) !important;
}

.dark-mode .subnav-link {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .subnav-link:hover {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .subnav-link.active {
    background: var(--accent-color) !important;
    color: var(--bg-primary) !important;
}

/* Category sections */
.dark-mode .category-section {
    background: var(--bg-secondary);
}

.dark-mode .category-section h2 {
    color: var(--text-primary);
}

/* Post cards */
.dark-mode .post-card,
.dark-mode .horizontal-post-card {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.dark-mode .post-card:hover,
.dark-mode .horizontal-post-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15);
}

.dark-mode .post-card h3,
.dark-mode .horizontal-post-card h3 {
    color: var(--text-primary);
}

.dark-mode .post-card p,
.dark-mode .horizontal-post-card p {
    color: var(--text-secondary);
}

.dark-mode .post-meta {
    color: var(--text-muted);
}

.dark-mode .category-badge {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Article page */
.dark-mode .post-title {
    color: var(--text-primary);
}

.dark-mode .post-meta {
    color: var(--text-muted);
}

.dark-mode .content.typography {
    color: var(--text-secondary);
}

.dark-mode .content.typography p:first-of-type {
    color: var(--text-primary);
}

.dark-mode .content.typography h2,
.dark-mode .content.typography h3 {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

.dark-mode .content.typography blockquote {
    background: linear-gradient(135deg, #1e293b, #334155);
    border-left-color: var(--accent-color);
    color: var(--text-secondary);
}

.dark-mode .content.typography a {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.dark-mode .content.typography a:hover {
    color: var(--accent-hover);
    background: rgba(96, 165, 250, 0.1);
}

.dark-mode .content.typography code {
    background: var(--bg-tertiary);
    color: #fbbf24;
}

.dark-mode .content.typography pre {
    background: #000000;
    border: 1px solid var(--border-color);
}

/* Sidebar */
.dark-mode .sidebar {
    background: transparent;
}

.dark-mode .aside-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .aside-card h3 {
    color: var(--accent-color) !important;
}

.dark-mode .meta-list li {
    color: var(--text-secondary);
}

.dark-mode .meta-list li strong {
    color: var(--text-primary);
}

.dark-mode #outline-list li a {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.dark-mode #outline-list li a:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.dark-mode .tips-card kbd {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Share buttons */
.dark-mode .enhanced-share {
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.9), rgba(51, 65, 85, 0.9));
    border-color: var(--border-color);
}

.dark-mode .share-btn {
    background: var(--accent-color);
}

.dark-mode .share-btn:hover {
    background: var(--accent-hover);
}

/* Footer */
.dark-mode footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.dark-mode footer h3,
.dark-mode footer h4 {
    color: var(--text-primary);
}

.dark-mode footer a {
    color: var(--text-secondary);
}

.dark-mode footer a:hover {
    color: var(--accent-color);
}

.dark-mode .footer-subscribe input {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .footer-subscribe button {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.dark-mode .footer-subscribe button:hover {
    background: var(--accent-hover);
}

/* Buttons */
.dark-mode .back-to-top {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.dark-mode .back-to-top:hover {
    background: var(--accent-hover);
}

.dark-mode .back {
    background: var(--bg-tertiary);
    color: var(--accent-color);
}

.dark-mode .back:hover {
    background: var(--accent-color);
    color: var(--bg-primary);
}

/* Loading skeletons */
.dark-mode .post-skeleton .sk-title,
.dark-mode .post-skeleton .sk-meta,
.dark-mode .post-skeleton .sk-paragraph {
    background: linear-gradient(90deg, #1e293b, #334155, #1e293b);
    background-size: 200% 100%;
}

.dark-mode .post-skeleton .sk-image {
    background: #1e293b;
}

/* Modal */
.dark-mode .subscription-modal {
    background: rgba(15, 23, 42, 0.9);
}

.dark-mode .subscription-dialog {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .subscription-dialog input {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .subscription-submit {
    background: var(--accent-color);
    color: var(--bg-primary);
}

.dark-mode .subscription-submit:hover {
    background: var(--accent-hover);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        width: 36px;
        height: 36px;
        margin-left: 0.25rem;
    }
}