/* ========================================
   DARK MODE STYLES
   ======================================== */

/* Dark Mode CSS Variables */
[data-theme="dark"] {
    /* Dark Colors */
    --color-primary: #ffffff;
    --color-secondary: #d4af37;
    --color-accent: #ffa726;
    --color-hover: #81c784;
    --color-text: #e0e0e0;
    --color-text-light: #b0b0b0;
    --color-bg: #121212;
    --color-bg-alt: #1e1e1e;
    
    /* Dark shadows */
    --shadow-light: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-medium: 0 4px 15px rgba(0,0,0,0.4);
    --shadow-heavy: 0 8px 25px rgba(0,0,0,0.5);
}

/* Dark Mode Global Overrides */
[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Subtiles Sternenmuster für den gesamten Hintergrund */
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff15, transparent),
        radial-gradient(2px 2px at 40px 70px, #ffffff10, transparent),
        radial-gradient(1px 1px at 90px 40px, #ffffff40, transparent),
        radial-gradient(1px 1px at 130px 80px, #ffffff20, transparent),
        radial-gradient(2px 2px at 160px 30px, #ffffff40, transparent),
        radial-gradient(1px 1px at 200px 60px, #ffffff20, transparent),
        radial-gradient(2px 2px at 240px 90px, #ffffff15, transparent),
        radial-gradient(1px 1px at 280px 20px, #ffffff10, transparent);
    background-repeat: repeat;
    background-size: 300px 150px;
    /* Animate background position instead of element opacity to avoid dimming all content */
    animation: twinkle 12s ease-in-out infinite alternate;
    will-change: background-position;
}

@keyframes twinkle {
    0% {
        background-position: 0px 0px, 20px 70px, 90px 40px, 130px 80px, 160px 30px, 200px 60px, 240px 90px, 280px 20px;
    }
    100% {
        background-position: 10px 10px, 30px 80px, 100px 50px, 140px 90px, 170px 40px, 210px 70px, 250px 100px, 290px 30px;
    }
}

[data-theme="dark"] .navbar {
    background: transparent !important;
}

[data-theme="dark"] .header-section {
    background: linear-gradient(135deg, 
                rgba(10,10,25,0.85) 0%, 
                rgba(20,20,40,0.85) 30%,
                rgba(25,25,50,0.85) 70%, 
                rgba(212,175,55,0.75) 100%),
                url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

[data-theme="dark"] .featured-post-card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .discovery-card,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .create-form-section,
[data-theme="dark"] .post-preview-card,
[data-theme="dark"] .popular-post-card,
[data-theme="dark"] .archive-year-section {
    background: var(--color-bg-alt);
    border-color: #333;
}

[data-theme="dark"] .archive-posts-list {
    background: var(--color-bg-alt);
}

/* Remove TinyMCE dark overrides so editor stays default light */

[data-theme="dark"] .comment-item {
    background: var(--color-bg-alt);
    border-color: #333;
}

[data-theme="dark"] .comment-form-container {
    background: var(--color-bg-alt);
    border-color: #333;
}

/* Removed toolbar/edit area dark styling to avoid forcing dark mode inside editor */

[data-theme="dark"] .navbar .hamburger-lines .line {
    background: var(--color-text);
}

[data-theme="dark"] .create-input,
[data-theme="dark"] .create-textarea,
[data-theme="dark"] .card-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] .form-control {
    background: var(--color-bg-alt);
    border-color: #444;
    color: var(--color-text);
}

[data-theme="dark"] .create-input:focus,
[data-theme="dark"] .create-textarea:focus,
[data-theme="dark"] .card-input:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] .form-control:focus {
    background: var(--color-bg);
    border-color: var(--color-accent);
}

[data-theme="dark"] .about-quote {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-footer .footer-text {
    background: var(--color-bg-alt);
    color: #e0e0e0;
}

[data-theme="dark"] .no-cards {
    background: var(--color-bg-alt);
    border-color: #444;
    color: var(--color-text-light);
}

[data-theme="dark"] .loading-spinner {
    color: var(--color-text-light);
}

[data-theme="dark"] .spinner {
    border-color: #333;
    border-top-color: var(--color-accent);
}

/* Notifications: dark theme cleanup */
[data-theme="dark"] .notification {
    background: rgba(25,30,38,0.9) !important;
    color: #e3e8ef !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    backdrop-filter: blur(4px) saturate(140%);
}
[data-theme="dark"] .notification.alert-success {
    background: rgba(23,52,37,0.85) !important;
    color: #7ad49c !important;
    border-color: #2f6f4c !important;
}
[data-theme="dark"] .notification.alert-danger {
    background: rgba(78,28,28,0.85) !important;
    color: #ff8a80 !important;
    border-color: #b84242 !important;
}
[data-theme="dark"] .notification.alert-info {
    background: rgba(26,42,96,0.85) !important;
    color: #7bb6ff !important;
    border-color: #3565b3 !important;
}

/* Comment feedback container + alerts (reusing same palette) */
[data-theme="dark"] #comment-feedback .alert { 
    background: rgba(25,30,38,0.9) !important; 
    color:#e3e8ef !important; 
    border: 1px solid rgba(255,255,255,0.12) !important; 
    backdrop-filter: blur(4px) saturate(140%); 
}
[data-theme="dark"] #comment-feedback .alert-success { 
    background: rgba(23,52,37,0.85) !important; 
    color:#7ad49c !important; 
    border-color:#2f6f4c !important; 
}
[data-theme="dark"] #comment-feedback .alert-danger { 
    background: rgba(78,28,28,0.85) !important; 
    color:#ff8a80 !important; 
    border-color:#b84242 !important; 
}
[data-theme="dark"] #comment-feedback .alert-info { 
    background: rgba(26,42,96,0.85) !important; 
    color:#7bb6ff !important; 
    border-color:#3565b3 !important; 
}

/* Dark mode: admin-required warning on create page */
[data-theme="dark"] #admin-required .alert.alert-warning {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%) !important;
    color: var(--color-text) !important;
    border: 2px solid var(--color-accent) !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.25);
}
[data-theme="dark"] #admin-required .btn.btn-outline-secondary {
    color: var(--color-text) !important;
    border-color: #555 !important;
}
[data-theme="dark"] #admin-required .btn.btn-outline-secondary:hover {
    background: #333 !important;
    color: #fff !important;
}

[data-theme="dark"] .tag {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

[data-theme="dark"] .tag:hover {
    background-color: var(--color-secondary);
}

/* Dark Mode Admin Modal Styles */
[data-theme="dark"] #admin-login-modal .modal-content {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 175, 55, 0.2);
}

/* Dark Mode Card Create Modal: dark shell, light inputs */
[data-theme="dark"] #card-create-modal .modal-content {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(212, 175, 55, 0.2);
    color: var(--color-text);
}
[data-theme="dark"] #card-create-modal .modal-body,
[data-theme="dark"] #card-create-modal .modal-label {
    color: var(--color-text);
}
[data-theme="dark"] #card-create-modal input[type="text"],
[data-theme="dark"] #card-create-modal input[type="password"],
[data-theme="dark"] #card-create-modal input[type="number"],
[data-theme="dark"] #card-create-modal textarea,
[data-theme="dark"] #card-create-modal .card-input {
    background: #ffffff;
    color: #222222;
    border-color: #dddddd;
}
[data-theme="dark"] #card-create-modal input[type="text"]:focus,
[data-theme="dark"] #card-create-modal input[type="password"]:focus,
[data-theme="dark"] #card-create-modal input[type="number"]:focus,
[data-theme="dark"] #card-create-modal textarea:focus,
[data-theme="dark"] #card-create-modal .card-input:focus {
    background: #ffffff;
    color: #222222;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);
}

[data-theme="dark"] #admin-login-modal .modal-header {
    background: linear-gradient(135deg, 
                rgba(5,5,15,0.95) 0%, 
                rgba(15,15,30,0.95) 30%,
                rgba(20,20,40,0.95) 70%, 
                rgba(212,175,55,0.85) 100%),
                url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80');
}

[data-theme="dark"] #admin-login-modal #admin-login-cancel {
    color: var(--color-text);
    border-color: rgba(212, 175, 55, 0.5);
}

[data-theme="dark"] #admin-login-modal #admin-login-cancel:hover {
    background: rgba(212, 175, 55, 0.2);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* Dark Mode Preview Styles */
[data-theme="dark"] .preview-box {
    background: var(--color-bg-alt);
    border-color: #444;
    color: var(--color-text);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

[data-theme="dark"] .preview-box:hover {
    border-color: var(--color-accent);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .preview-placeholder {
    color: var(--color-text-light);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E") no-repeat center 20px;
    background-size: 40px 40px;
}

[data-theme="dark"] .preview-box blockquote {
    background: var(--color-bg);
    border-left-color: var(--color-accent);
    color: var(--color-text);
}

[data-theme="dark"] .preview-box blockquote::before {
    color: var(--color-accent);
}

[data-theme="dark"] .preview-box code {
    background: var(--color-bg);
    color: var(--color-accent);
    border-color: #444;
}

[data-theme="dark"] .preview-box pre {
    background: var(--color-bg);
    border-color: #444;
}

[data-theme="dark"] .preview-box pre code {
    color: var(--color-text);
}

[data-theme="dark"] .preview-box table {
    background: var(--color-bg-alt);
}

[data-theme="dark"] .preview-box th {
    background: var(--color-bg);
    color: var(--color-text);
}

[data-theme="dark"] .preview-box td {
    border-bottom-color: #444;
}

[data-theme="dark"] .preview-box tr:hover {
    background: rgba(212, 175, 55, 0.1);
}

/* Dark Mode Drop Cap */
[data-theme="dark"] .preview-box p:first-of-type:first-letter,
[data-theme="dark"] .blogpost-content p:first-of-type:first-letter,
[data-theme="dark"] .post-content p:first-of-type:first-letter,
[data-theme="dark"] .read-post-content p:first-of-type:first-letter {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback für Browser ohne Gradient-Text */
    color: var(--color-secondary);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Dark Mode Post Date Styles */
[data-theme="dark"] .post-updated {
    color: var(--color-secondary);
}

/* Dark Mode Comments Styles */
[data-theme="dark"] .comments-section {
    border-top-color: var(--color-accent);
}

[data-theme="dark"] .comment-form-container {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-color: var(--color-accent);
}

[data-theme="dark"] .comment-form .form-control {
    background: var(--color-bg);
    border-color: #444;
    color: var(--color-text);
}

[data-theme="dark"] .comment-form .form-control:focus {
    background: var(--color-bg-alt);
    border-color: var(--color-accent);
}

[data-theme="dark"] .comment-form .form-control:hover {
    border-color: var(--color-secondary);
}

[data-theme="dark"] .comment-item {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    border-color: #444;
    border-left-color: var(--color-accent);
}

[data-theme="dark"] .comment-item:hover {
    border-color: var(--color-secondary);
}

[data-theme="dark"] .comment-header {
    border-bottom-color: #444;
}

[data-theme="dark"] .no-comments {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
    border-color: #444;
}

[data-theme="dark"] .comment-message.success {
    background: linear-gradient(135deg, #1b4332 0%, #2d5a3d 100%);
    color: #81c784;
    border-color: #81c784;
}

[data-theme="dark"] .comment-message.error {
    background: linear-gradient(135deg, #4a1e1e 0%, #5d2727 100%);
    color: #ef5350;
    border-color: #ef5350;
}

/* Dark Mode Styles for Most Read */
[data-theme="dark"] .most-read-item {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, rgba(44, 62, 80, 0.3) 100%);
    border-color: rgba(162, 127, 77, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .most-read-item:hover {
    box-shadow: 0 8px 24px rgba(162, 127, 77, 0.15);
    border-color: rgba(162, 127, 77, 0.25);
}

/* Dark mode adjustments */
[data-theme="dark"] .menu-toggle {
    background: linear-gradient(135deg, #1a252f, #2c3e50);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .menu-option {
    background: linear-gradient(135deg, #1a252f, #34495e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .admin-btn {
    background: linear-gradient(135deg, #6a4c93, #8e44ad);
}

[data-theme="dark"] .menu-option[data-tooltip]::after {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
}

/* ========================================
   ADMIN BAR STYLES
   ======================================== */

/* Admin Toolbar Dark Mode */
[data-theme="dark"] #admin-toolbar {
    background: linear-gradient(135deg, rgba(30, 30, 50, 0.95) 0%, rgba(40, 40, 60, 0.95) 100%) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Admin Login Button Dark Mode */
[data-theme="dark"] .admin-login-btn {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%) !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
}

/* Admin Toolbar Responsive */
/* Admin Toolbar Mobile Styles sind in den konsolidierten Responsive Styles integriert */
/* ========================================
   ENHANCED NEW POST HIGHLIGHTS
   ======================================== */
/* Dark Mode Adjustments */
[data-theme="dark"] .post-card-very-new {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, var(--color-bg) 100%);
    border-left-color: #dc3545;
}

[data-theme="dark"] .post-card-hot {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, var(--color-bg) 100%);
    border-left-color: #e74c3c;
}

[data-theme="dark"] .post-card-new {
    background: linear-gradient(135deg, rgba(162, 127, 77, 0.05) 0%, var(--color-bg) 100%);
    border-left-color: var(--color-secondary);
}

[data-theme="dark"] .discovery-card-very-new {
    border-color: #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}

[data-theme="dark"] .discovery-card-new {
    border-color: var(--color-secondary);
    box-shadow: 0 4px 15px rgba(162, 127, 77, 0.2);
}