/* Dark mode overrides - class-based */
html.dark body {
    background-color: #000 !important;
    color: #fff !important;
}

html:not(.dark) body {
    background-color: #fff !important;
    color: #18181b !important;
}

/* Header */
html.dark header.navbar {
    background-color: #050505 !important;
    border-color: #27272a !important;
}

html:not(.dark) header.navbar {
    background-color: #fff !important;
    border-color: #e4e4e7 !important;
}

/* Text colors */
html.dark .text-zinc-900 {
    color: #fff !important;
}

html:not(.dark) .text-zinc-900 {
    color: #18181b !important;
}

html.dark .text-zinc-800 {
    color: #e4e4e7 !important;
}

html:not(.dark) .text-zinc-800 {
    color: #27272a !important;
}

html.dark .text-zinc-700 {
    color: #d4d4d8 !important;
}

html:not(.dark) .text-zinc-700 {
    color: #3f3f46 !important;
}

html.dark .text-zinc-600 {
    color: #a1a1aa !important;
}

html:not(.dark) .text-zinc-600 {
    color: #52525b !important;
}

/* Backgrounds - Main containers */
html.dark .bg-white {
    background-color: #000 !important;
}

html:not(.dark) .bg-white {
    background-color: #fff !important;
}

html.dark .bg-zinc-50 {
    background-color: rgba(24, 24, 27, 0.5) !important;
}

html:not(.dark) .bg-zinc-50 {
    background-color: #fafafa !important;
}

html.dark .bg-zinc-100 {
    background-color: #18181b !important;
}

html:not(.dark) .bg-zinc-100 {
    background-color: #f4f4f5 !important;
}

html.dark .bg-zinc-200 {
    background-color: #27272a !important;
}

html:not(.dark) .bg-zinc-200 {
    background-color: #e4e4e7 !important;
}

/* Borders */
html.dark .border-zinc-200 {
    border-color: #27272a !important;
}

html:not(.dark) .border-zinc-200 {
    border-color: #e4e4e7 !important;
}

html.dark .border-zinc-300 {
    border-color: #3f3f46 !important;
}

html:not(.dark) .border-zinc-300 {
    border-color: #d4d4d8 !important;
}

/* Footer */
html.dark footer {
    background-color: transparent !important;
    border-color: #27272a !important;
}

html:not(.dark) footer {
    background-color: #fafafa !important;
    border-color: #e4e4e7 !important;
}

/* Fill colors for SVG */
html.dark .fill-zinc-900 {
    fill: #fff !important;
}

html:not(.dark) .fill-zinc-900 {
    fill: #18181b !important;
}

/* Prose/Content - Important for article pages */
html.dark .prose {
    color: #fff !important;
}

html:not(.dark) .prose {
    color: #3f3f46 !important;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
    color: #fff !important;
}

html:not(.dark) .prose h1,
html:not(.dark) .prose h2,
html:not(.dark) .prose h3,
html:not(.dark) .prose h4 {
    color: #18181b !important;
}

html.dark .prose p {
    color: #e4e4e7 !important;
}

html:not(.dark) .prose p {
    color: #3f3f46 !important;
}

html.dark .prose strong {
    color: #fff !important;
}

html:not(.dark) .prose strong {
    color: #18181b !important;
}

html.dark .prose blockquote {
    background-color: rgba(24, 24, 27, 0.5) !important;
}

html:not(.dark) .prose blockquote {
    background-color: #f4f4f5 !important;
}

html.dark .prose img {
    border-color: #27272a !important;
}

html:not(.dark) .prose img {
    border-color: #e4e4e7 !important;
}

/* Styling for CKEditor output content */
.prose h2 {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.prose p {
    line-height: 1.8;
}

/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4rem;
}

.page-item {
    list-style: none;
}

.page-link {
    display: block;
    padding: 10px 20px;
    border-radius: 14px !important;
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    color: #52525b !important;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
}

html.dark .page-link {
    background: #18181b !important;
    border: 1px solid #27272a !important;
    color: #a1a1aa !important;
}

.page-item.active .page-link {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

.page-item.disabled .page-link {
    background: #fafafa !important;
    color: #a1a1aa !important;
    border-color: #e4e4e7 !important;
}

html.dark .page-item.disabled .page-link {
    background: #0f0f10 !important;
    color: #3f3f46 !important;
    border-color: #1f1f22 !important;
}

.page-link:hover:not(.disabled) {
    border-color: #3b82f6 !important;
}

html.dark .page-link:hover:not(.disabled) {
    color: white !important;
    background: #27272a !important;
}