/* Custom styles for CKEditor 5 content */
.ck-content h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
}

.ck-content h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.75em 0;
}

.ck-content h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 0.83em 0;
}

.ck-content p {
    margin: 1em 0;
}

.ck-content blockquote {
    border-left: 5px solid #ccc;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    font-style: italic;
}

.ck-content table {
    border-collapse: collapse;
    width: 100%;
}

.ck-content table td,
.ck-content table th {
    border: 1px solid #ddd;
    padding: 8px;
}

.ck-content table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* ============================================
   CKEditor 5 Dark Mode Support
   ============================================ */
html.dark {
    /* Base colors */
    --ck-color-base-background: #1f2937;
    --ck-color-base-border: #374151;
    --ck-color-base-text: #e5e7eb;
    --ck-color-base-foreground: #111827;
    
    /* Text color */
    --ck-color-text: #e5e7eb;
    --ck-content-font-color: #e5e7eb;
    
    /* Focus/active states - uses primary color from theme */
    --ck-color-focus-border: var(--color-primary-500, #9a8f84);
    --ck-color-focus-outer-shadow: color-mix(in srgb, var(--color-primary-500, #9a8f84) 30%, transparent);
    
    /* Shadows */
    --ck-color-shadow-drop: hsla(0, 0%, 0%, 0.3);
    --ck-color-shadow-inner: hsla(0, 0%, 0%, 0.2);
    
    /* Button colors */
    --ck-color-button-default-background: transparent;
    --ck-color-button-default-hover-background: #374151;
    --ck-color-button-default-active-background: #1f2937;
    --ck-color-button-default-disabled-background: transparent;
    
    --ck-color-button-on-background: #374151;
    --ck-color-button-on-hover-background: #4b5563;
    --ck-color-button-on-active-background: #1f2937;
    --ck-color-button-on-disabled-background: #374151;
    
    --ck-color-button-action-background: #2563eb;
    --ck-color-button-action-hover-background: #1d4ed8;
    --ck-color-button-action-active-background: #1e40af;
    --ck-color-button-action-text: #ffffff;
    
    --ck-color-button-save: #22c55e;
    --ck-color-button-cancel: #ef4444;
    
    /* Dropdown */
    --ck-color-dropdown-panel-background: #1f2937;
    --ck-color-dropdown-panel-border: #374151;
    
    /* Input */
    --ck-color-input-background: #111827;
    --ck-color-input-border: #374151;
    --ck-color-input-text: #e5e7eb;
    --ck-color-input-disabled-background: #1f2937;
    --ck-color-input-disabled-border: #374151;
    --ck-color-input-disabled-text: #6b7280;
    
    /* List */
    --ck-color-list-background: #1f2937;
    --ck-color-list-button-hover-background: #374151;
    --ck-color-list-button-on-background: var(--color-primary-500, #9a8f84);
    --ck-color-list-button-on-text: #ffffff;
    
    /* Panel */
    --ck-color-panel-background: #1f2937;
    --ck-color-panel-border: #374151;
    
    /* Toolbar */
    --ck-color-toolbar-background: #1f2937;
    --ck-color-toolbar-border: #374151;
    
    /* Tooltip */
    --ck-color-tooltip-background: #111827;
    --ck-color-tooltip-text: #e5e7eb;
    
    /* Engine/editable */
    --ck-color-engine-placeholder-text: #6b7280;
}

/* Dark mode content area */
html.dark .ck-content {
    background: #111827;
    color: #e5e7eb;
}

html.dark .ck-content blockquote {
    border-left-color: #4b5563;
}

html.dark .ck-content table td,
html.dark .ck-content table th {
    border-color: #374151;
}

html.dark .ck-content table th {
    background-color: #1f2937;
}

html.dark .ck-content a {
    color: #60a5fa;
}

html.dark .ck-content pre {
    background: #1f2937;
    color: #e5e7eb;
    border-color: #374151;
}