/**
 * CKEditor Dark Mode Styles
 * 
 * This file provides dark mode overrides for CKEditor content.
 * It ensures that dynamic content from CKEditor properly adapts
 * to site's dark/light theme toggle.
 * 
 * Usage: Include this stylesheet and add 'dark:prose-invert' class
 * to your content container.
 */

/* Base text colors in dark mode */
.dark .prose,
.dark .ck-content {
    color: #e5e7eb !important;
}

/* Headings in dark mode */
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #f9fafb !important;
}

/* Links in dark mode */
.dark .prose a {
    color: #60a5fa !important;
    text-decoration: underline;
}

.dark .prose a:hover {
    color: #93c5fd !important;
}

/* Bold text in dark mode */
.dark .prose strong,
.dark .prose b {
    color: #f3f4f6 !important;
}

/* Italic text in dark mode */
.dark .prose em,
.dark .prose i {
    color: #d1d5db !important;
}

/* Inline code in dark mode */
.dark .prose code {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
}

/* Code blocks in dark mode */
.dark .prose pre {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

.dark .prose pre code {
    background-color: transparent !important;
    border: none;
    padding: 0;
}

/* Blockquotes in dark mode */
.dark .prose blockquote {
    border-left-color: #4b5563 !important;
    color: #d1d5db !important;
    background-color: rgba(75, 85, 99, 0.1);
    padding-left: 16px;
    margin-left: 0;
}

/* Lists in dark mode */
.dark .prose ul,
.dark .prose ol {
    color: #d1d5db !important;
}

.dark .prose ul li::marker,
.dark .prose ol li::marker {
    color: #9ca3af !important;
}

/* Tables in dark mode */
.dark .prose table {
    border-color: #374151 !important;
    border-collapse: collapse;
    width: 100%;
}

.dark .prose th,
.dark .prose td {
    border-color: #374151 !important;
    color: #e5e7eb !important;
    padding: 8px 12px;
}

.dark .prose th {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
    font-weight: 600;
}

.dark .prose tr:nth-child(even) {
    background-color: rgba(75, 85, 99, 0.1);
}

.dark .prose tr:hover {
    background-color: rgba(75, 85, 99, 0.2);
}

/* Images in dark mode */
.dark .prose img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* Horizontal rules in dark mode */
.dark .prose hr {
    border-color: #374151 !important;
    margin: 24px 0;
}

/* Paragraphs, spans, and divs in dark mode */
.dark .prose p,
.dark .prose span,
.dark .prose div {
    color: #e5e7eb !important;
}

/* Force remove inline colors from CKEditor in dark mode */
.dark .prose [style*="color"],
.dark .prose [style*="background-color"],
.dark .ck-content [style*="color"],
.dark .ck-content [style*="background-color"] {
    color: inherit !important;
    background-color: inherit !important;
}

/* Preserve important inline styles that should be kept (hex colors) */
.dark .prose [style*="color: #"],
.dark .ck-content [style*="color: #"] {
    /* Allow hex colors to pass through for intentional colored elements */
}

/* Additional element-specific overrides */
.dark .prose figcaption {
    color: #9ca3af !important;
    font-size: 0.875rem;
    text-align: center;
    margin-top: 8px;
}

.dark .prose abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

.dark .prose mark {
    background-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
    padding: 2px 4px;
}

.dark .prose del {
    color: #9ca3af !important;
    text-decoration: line-through;
}

.dark .prose ins {
    color: #34d399 !important;
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dark .prose table {
        font-size: 0.875rem;
    }
    
    .dark .prose th,
    .dark .prose td {
        padding: 6px 8px;
    }
}