/* CKEditor Dark Mode Styling */

/* Main toolbar container */
.ck-toolbar {
    background-color: var(--color-card-section) !important;
    border-color: var(--color-border) !important;
    border-bottom: 1px solid var(--color-border) !important;
}

/* Toolbar buttons */
.ck-toolbar__items .ck-button:not(.ck-color-grid__tile) {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

.ck-toolbar__items .ck-button:hover:not(.ck-disabled):not(.ck-color-grid__tile) {
    background-color: var(--color-card-light) !important;
    color: var(--color-highlight) !important;
}

.ck-toolbar__items .ck-button.ck-on {
    color: var(--color-highlight) !important;
    /*color: #FFFFFF !important;*/
}


/* Toolbar separator */
.ck-toolbar__separator {
    background-color: var(--color-border) !important;
}

/* Editor content area */
.ck-editor__editable {
    background-color: var(--color-card, #18181B) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Dropdown menus */
.ck-dropdown__panel {
    background-color: var(--color-card-section) !important;
    border-color: var(--color-border) !important;
}

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

.ck-list__item:hover {
    background-color: var(--color-card-light) !important;
}

.ck-list__item.ck-on {
    color: var(--color-highlight) !important;
    /*color: #FFFFFF !important;*/
}

/* Color picker and button dropdowns */
.ck-color-grid__tile {
    border-color: var(--color-border) !important;
}

.ck-color-grid__tile:hover {
    border-color: var(--color-highlight) !important;
}

/* Font family, size, and other dropdowns */
.ck-dropdown__panel .ck-list {
    background-color: var(--color-card-section) !important;
}

.ck-dropdown__panel .ck-button:not(.ck-color-grid__tile) {
    color: var(--color-text) !important;
    background-color: transparent !important;
}

.ck-dropdown__panel .ck-button:hover:not(.ck-color-grid__tile) {
    background-color: var(--color-card-light) !important;
}

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

.ck-input:focus {
    border-color: var(--color-highlight) !important;
    box-shadow: 0 0 0 2px rgba(229, 184, 11, 0.2) !important;
}

/* Dialog boxes */
.ck-dialog__content {
    background-color: var(--color-card-section) !important;
    color: var(--color-text) !important;
}

.ck-dialog__header {
    background-color: var(--color-card) !important;
    border-color: var(--color-border) !important;
}

/* Labels and text in dialogs */
.ck-labeled-field-view > label {
    color: var(--color-input-text) !important;
}

/* Buttons in dialogs */
.ck-button-cancel,
.ck-button-save {
    background-color: var(--color-card-light) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ck-button-save {
    background-color: var(--color-highlight-dark) !important;
    color: #FFFFFF !important;
}

.ck-button-save:hover {
    background-color: var(--color-highlight) !important;
    color: #000000 !important;
}

/* Placeholder text */
.ck-editor__editable.ck-placeholder::before {
    color: var(--color-muted, #5c5c5e) !important;
}

/* Balloon toolbar */
.ck-balloon-panel {
    background-color: var(--color-card-section) !important;
    border-color: var(--color-border) !important;
}

/* Tooltip styling */
.ck-tooltip {
    background-color: var(--color-card) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Table styling in editor */
.ck-content table {
    border-color: var(--color-border) !important;
}

.ck-content table td,
.ck-content table th {
    border-color: var(--color-border) !important;
}

/* Code block styling */
.ck-content pre {
    background-color: var(--color-card) !important;
    color: var(--color-input-text) !important;
    border-color: var(--color-border) !important;
}

/* Blockquote styling */
.ck-content blockquote {
    border-left-color: var(--color-highlight) !important;
    color: var(--color-input-text) !important;
}

/* Text color and background color buttons */
.ck-color-picker__input-row {
    background-color: var(--color-card-section) !important;
}

.ck-color-picker__input-row input {
    background-color: var(--color-card) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

.ck-color-picker__input-row input:focus {
    border-color: var(--color-highlight) !important;
}

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

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

/* Dropdown panel text */
.ck-dropdown__panel {
    color: var(--color-text) !important;
}