/* CKEditor Theme Integration with Blazor Bootstrap Light/Dark Mode */

/* Light Mode (default) */
:root {
    --ck-color-base-background: #ffffff;
    --ck-color-base-foreground: #fafafa;
    --ck-color-base-border: #c4c4c4;
    --ck-color-base-text: #333333;
    --ck-color-focus-border: #0d6efd;
    --ck-color-toolbar-background: #f8f9fa;
    --ck-color-toolbar-border: #dee2e6;
    --ck-color-button-default-background: #ffffff;
    --ck-color-button-default-hover-background: #e9ecef;
    --ck-color-button-on-background: #e9ecef;
    --ck-color-button-on-hover-background: #dee2e6;
    --ck-color-panel-background: #ffffff;
    --ck-color-panel-border: #c4c4c4;
    --ck-color-dropdown-panel-background: #ffffff;
    --ck-color-dropdown-panel-border: #c4c4c4;
    --ck-color-input-background: #ffffff;
    --ck-color-input-border: #c4c4c4;
    --ck-color-input-text: #333333;
    --ck-color-list-background: #ffffff;
    --ck-color-list-button-hover-background: #e9ecef;
    --ck-color-list-button-on-background: #e9ecef;
    --ck-color-text: #333333;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.15);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.1);
}

/* Dark Mode */
[data-bs-theme="dark"] {
    --ck-color-base-background: #1a1d20;
    --ck-color-base-foreground: #2b2f33;
    --ck-color-base-border: #3f4447;
    --ck-color-base-text: #e8e9ea;
    --ck-color-focus-border: #0d6efd;
    --ck-color-toolbar-background: #212529;
    --ck-color-toolbar-border: #3f4447;
    --ck-color-button-default-background: #2b2f33;
    --ck-color-button-default-hover-background: #3a3e42;
    --ck-color-button-on-background: #3a3e42;
    --ck-color-button-on-hover-background: #494d51;
    --ck-color-panel-background: #1a1d20;
    --ck-color-panel-border: #3f4447;
    --ck-color-dropdown-panel-background: #1a1d20;
    --ck-color-dropdown-panel-border: #3f4447;
    --ck-color-input-background: #2b2f33;
    --ck-color-input-border: #3f4447;
    --ck-color-input-text: #e8e9ea;
    --ck-color-list-background: #1a1d20;
    --ck-color-list-button-hover-background: #3a3e42;
    --ck-color-list-button-on-background: #3a3e42;
    --ck-color-text: #e8e9ea;
    --ck-color-shadow-drop: rgba(0, 0, 0, 0.4);
    --ck-color-shadow-inner: rgba(0, 0, 0, 0.3);
}

/* Apply theme colors to CKEditor */
.ck-editor {
    --ck-border-radius: 4px;
}

/* Toolbar styling */
.ck.ck-toolbar {
    background-color: var(--ck-color-toolbar-background) !important;
    border-color: var(--ck-color-toolbar-border) !important;
    color: var(--ck-color-text) !important;
}

/* Editor content area */
.ck.ck-editor__main > .ck-editor__editable {
    background-color: var(--ck-color-base-background) !important;
    color: var(--ck-color-text) !important;
    border-color: var(--ck-color-base-border) !important;
}

.ck.ck-editor__editable.ck-focused {
    border-color: var(--ck-color-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Buttons */
.ck.ck-button {
    background-color: var(--ck-color-button-default-background) !important;
    color: var(--ck-color-text) !important;
}

.ck.ck-button:hover:not(.ck-disabled) {
    background-color: var(--ck-color-button-default-hover-background) !important;
}

.ck.ck-button.ck-on {
    background-color: var(--ck-color-button-on-background) !important;
}

.ck.ck-button.ck-on:hover:not(.ck-disabled) {
    background-color: var(--ck-color-button-on-hover-background) !important;
}

/* Dropdowns */
.ck.ck-dropdown__panel {
    background-color: var(--ck-color-dropdown-panel-background) !important;
    border-color: var(--ck-color-dropdown-panel-border) !important;
    box-shadow: 0 0.5rem 1rem var(--ck-color-shadow-drop) !important;
}

/* Input fields */
.ck.ck-input {
    background-color: var(--ck-color-input-background) !important;
    border-color: var(--ck-color-input-border) !important;
    color: var(--ck-color-input-text) !important;
}

.ck.ck-input:focus {
    border-color: var(--ck-color-focus-border) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Lists */
.ck.ck-list {
    background-color: var(--ck-color-list-background) !important;
}

.ck.ck-list__item {
    color: var(--ck-color-text) !important;
}

.ck.ck-list__item:hover:not(.ck-disabled) {
    background-color: var(--ck-color-list-button-hover-background) !important;
}

.ck.ck-list__item.ck-on {
    background-color: var(--ck-color-list-button-on-background) !important;
}

/* Tooltips */
.ck.ck-tooltip {
    background-color: var(--ck-color-base-foreground) !important;
    color: var(--ck-color-text) !important;
    border-color: var(--ck-color-base-border) !important;
}

/* Balloon panels */
.ck.ck-balloon-panel {
    background-color: var(--ck-color-panel-background) !important;
    border-color: var(--ck-color-panel-border) !important;
    box-shadow: 0 0.5rem 1rem var(--ck-color-shadow-drop) !important;
}

/* Table properties */
.ck.ck-table-properties-form,
.ck.ck-table-cell-properties-form {
    background-color: var(--ck-color-panel-background) !important;
}

/* Color picker */
.ck.ck-color-grid {
    background-color: var(--ck-color-panel-background) !important;
}

/* Source editing */
.ck.ck-source-editing-area {
    background-color: var(--ck-color-base-background) !important;
    color: var(--ck-color-text) !important;
}

.ck.ck-source-editing-area textarea {
    background-color: var(--ck-color-base-background) !important;
    color: var(--ck-color-text) !important;
    border-color: var(--ck-color-base-border) !important;
}

/* Scrollbar styling for dark mode */
[data-bs-theme="dark"] .ck-editor__editable::-webkit-scrollbar {
    width: 10px;
}

[data-bs-theme="dark"] .ck-editor__editable::-webkit-scrollbar-track {
    background: #2b2f33;
}

[data-bs-theme="dark"] .ck-editor__editable::-webkit-scrollbar-thumb {
    background: #494d51;
    border-radius: 5px;
}

[data-bs-theme="dark"] .ck-editor__editable::-webkit-scrollbar-thumb:hover {
    background: #5a5e62;
}

/* Ensure content inside editor is readable in dark mode */
[data-bs-theme="dark"] .ck-content {
    color: #e8e9ea !important;
}

[data-bs-theme="dark"] .ck-content h1,
[data-bs-theme="dark"] .ck-content h2,
[data-bs-theme="dark"] .ck-content h3,
[data-bs-theme="dark"] .ck-content h4,
[data-bs-theme="dark"] .ck-content h5,
[data-bs-theme="dark"] .ck-content h6 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .ck-content a {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .ck-content code {
    background-color: #2b2f33;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .ck-content pre {
    background-color: #2b2f33;
    color: #f8f9fa;
    border-color: #3f4447;
}

[data-bs-theme="dark"] .ck-content table {
    border-color: #3f4447;
}

[data-bs-theme="dark"] .ck-content table td,
[data-bs-theme="dark"] .ck-content table th {
    border-color: #3f4447;
}

/* Separator styling */
.ck.ck-toolbar__separator {
    background-color: var(--ck-color-base-border) !important;
}

/* Icons in dark mode */
[data-bs-theme="dark"] .ck.ck-button .ck-icon {
    color: #e8e9ea !important;
}

[data-bs-theme="dark"] .ck.ck-button.ck-disabled .ck-icon {
    opacity: 0.5;
}