/* assets/css/ckeditor-dark.css */

/* Toolbar background */
.dark .ck.ck-toolbar {
  background-color: #374151; /* Example: gray-700 */
  border-color: #4b5563; /* Example: gray-600 */
}

/* Toolbar buttons */
.dark .ck.ck-button {
  color: #d1d5db; /* Example: gray-300 */
  background-color: transparent;
}
.dark .ck.ck-button:hover:not(.ck-disabled) {
  background-color: #4b5563; /* Example: gray-600 */
  color: #f9fafb; /* Example: gray-50 */
}
.dark .ck.ck-button.ck-on {
  /* Active/toggled buttons */
  background-color: #4f46e5; /* Example: indigo-600 */
  color: #ffffff;
}

/* Dropdown Panels */
.dark .ck.ck-dropdown__panel {
  background-color: #374151; /* Example: gray-700 */
  border-color: #4b5563; /* Example: gray-600 */
}
.dark .ck.ck-list__item .ck-button:hover:not(.ck-disabled) {
  background-color: #4b5563; /* Example: gray-600 */
}

/* Editable Content Area */
.dark .ck.ck-editor__main > .ck-editor__editable {
  background-color: #1f2937; /* Example: gray-800 */
  color: #d1d5db; /* Example: gray-300 */
  border-color: #4b5563; /* Example: gray-600 */
}
.dark .ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: #6366f1; /* Example: indigo-500 */
}

/* Placeholder text */
.dark .ck.ck-placeholder::before {
  color: #6b7280; /* Example: gray-500 */
}

/* Add any other CKEditor dark mode overrides here... */
