/**
 * CKEditor 5 Dark Mode Support for Django Admin
 *
 * CKEditor 5 doesn't natively support dark mode, so we override its styles
 * when the admin interface is in dark mode.
 */

/* Dark mode styles for CKEditor 5 - Main editor area */
html.dark .ck.ck-editor__main > .ck-editor__editable,
html.dark .ck.ck-editor__main > .ck-editor__editable:not(.ck-focused),
html.dark .ck.ck-content {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor toolbar in dark mode */
html.dark .ck.ck-toolbar,
html.dark .ck.ck-toolbar.ck-toolbar_grouping {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor toolbar buttons in dark mode */
html.dark .ck.ck-toolbar .ck-button,
html.dark .ck.ck-toolbar .ck-button .ck-button__label,
html.dark .ck.ck-button .ck-button__label {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* CKEditor toolbar button icons in dark mode */
html.dark .ck.ck-toolbar .ck-button .ck-icon,
html.dark .ck.ck-button .ck-icon {
    color: rgb(209, 213, 219) !important; /* gray-300 */
    fill: rgb(209, 213, 219) !important; /* gray-300 */
}

html.dark .ck.ck-toolbar .ck-button:hover,
html.dark .ck.ck-button:hover {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

html.dark .ck.ck-toolbar .ck-button:hover .ck-icon,
html.dark .ck.ck-button:hover .ck-icon {
    color: rgb(243, 244, 246) !important; /* gray-100 */
    fill: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-toolbar .ck-button.ck-on,
html.dark .ck.ck-button.ck-on {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-toolbar .ck-button.ck-on .ck-icon,
html.dark .ck.ck-button.ck-on .ck-icon {
    color: rgb(243, 244, 246) !important; /* gray-100 */
    fill: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor dropdown button text */
html.dark .ck.ck-dropdown .ck-dropdown__button .ck-button__label,
html.dark .ck.ck-dropdown .ck-dropdown__button {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

html.dark .ck.ck-dropdown .ck-dropdown__arrow {
    fill: rgb(209, 213, 219) !important; /* gray-300 */
}

/* CKEditor toolbar separator in dark mode */
html.dark .ck.ck-toolbar .ck-toolbar__separator {
    background-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor dropdown panels in dark mode */
html.dark .ck.ck-dropdown__panel {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

html.dark .ck.ck-dropdown__panel .ck-dropdown__panel {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor list container */
html.dark .ck.ck-list {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* CKEditor list items in dropdowns */
html.dark .ck.ck-list .ck.ck-list__item,
html.dark .ck.ck-list__item {
    color: rgb(209, 213, 219) !important; /* gray-300 */
    background-color: transparent !important;
}

html.dark .ck.ck-list__item .ck-button__label {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

html.dark .ck.ck-list__item:hover {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

html.dark .ck.ck-list__item:hover .ck-button__label {
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-list__item.ck-on {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-list__item.ck-on .ck-button__label {
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor heading dropdown specific styles */
html.dark .ck.ck-heading_heading1,
html.dark .ck.ck-heading_heading2,
html.dark .ck.ck-heading_heading3,
html.dark .ck.ck-heading_heading4,
html.dark .ck.ck-heading_heading5,
html.dark .ck.ck-heading_heading6,
html.dark .ck.ck-heading_paragraph {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

html.dark .ck.ck-list__item:hover .ck-heading_heading1,
html.dark .ck.ck-list__item:hover .ck-heading_heading2,
html.dark .ck.ck-list__item:hover .ck-heading_heading3,
html.dark .ck.ck-list__item:hover .ck-heading_heading4,
html.dark .ck.ck-list__item:hover .ck-heading_heading5,
html.dark .ck.ck-list__item:hover .ck-heading_heading6,
html.dark .ck.ck-list__item:hover .ck-heading_paragraph {
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor dropdown button when open */
html.dark .ck.ck-dropdown.ck-dropdown_open > .ck-button {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

html.dark .ck.ck-dropdown.ck-dropdown_open > .ck-button .ck-button__label {
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-dropdown.ck-dropdown_open > .ck-button .ck-dropdown__arrow {
    fill: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor balloons (tooltips) in dark mode */
html.dark .ck.ck-balloon-panel {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

html.dark .ck.ck-tooltip .ck-tooltip__text {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor input fields in dark mode */
html.dark .ck.ck-input {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor labels in dark mode */
html.dark .ck.ck-labeled-field-view__status {
    color: rgb(156, 163, 175) !important; /* gray-400 */
}

/* CKEditor link input in dark mode */
html.dark .ck.ck-link-form {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

html.dark .ck.ck-link-form .ck-input {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor color picker in dark mode */
html.dark .ck.ck-color-grid {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

html.dark .ck.ck-color-grid__tile {
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor table properties in dark mode */
html.dark .ck.ck-table-properties-form,
html.dark .ck.ck-table-cell-properties-form {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

/* CKEditor heading styles in dark mode */
html.dark .ck.ck-editor__editable h2,
html.dark .ck.ck-editor__editable h3,
html.dark .ck.ck-editor__editable h4,
html.dark .ck.ck-editor__editable h5,
html.dark .ck.ck-editor__editable h6 {
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor paragraph text in dark mode */
html.dark .ck.ck-editor__editable p {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* CKEditor links in dark mode */
html.dark .ck.ck-editor__editable a {
    color: rgb(96, 165, 250) !important; /* blue-400 */
}

/* CKEditor lists in dark mode */
html.dark .ck.ck-editor__editable ul,
html.dark .ck.ck-editor__editable ol {
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* CKEditor blockquotes in dark mode */
html.dark .ck.ck-editor__editable blockquote {
    color: rgb(156, 163, 175) !important; /* gray-400 */
    border-left-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor code blocks in dark mode */
html.dark .ck.ck-editor__editable code {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    color: rgb(251, 191, 36) !important; /* amber-400 */
}

html.dark .ck.ck-editor__editable pre {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor tables in dark mode */
html.dark .ck.ck-editor__editable table {
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

html.dark .ck.ck-editor__editable table td,
html.dark .ck.ck-editor__editable table th {
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
    color: rgb(209, 213, 219) !important; /* gray-300 */
}

html.dark .ck.ck-editor__editable table th {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

/* CKEditor placeholder text in dark mode */
html.dark .ck.ck-editor__editable .ck-placeholder::before {
    color: rgb(107, 114, 128) !important; /* gray-500 */
}

/* CKEditor focus state in dark mode */
html.dark .ck.ck-editor__main > .ck-editor__editable:focus {
    border-color: rgb(249, 115, 22) !important; /* orange-500 - primary color */
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

/* CKEditor scrollbar in dark mode (for webkit browsers) */
html.dark .ck.ck-editor__editable::-webkit-scrollbar {
    width: 12px;
    background-color: rgb(31, 41, 55); /* gray-800 */
}

html.dark .ck.ck-editor__editable::-webkit-scrollbar-thumb {
    background-color: rgb(75, 85, 99); /* gray-600 */
    border-radius: 6px;
}

html.dark .ck.ck-editor__editable::-webkit-scrollbar-thumb:hover {
    background-color: rgb(107, 114, 128); /* gray-500 */
}

/* CKEditor sticky toolbar in dark mode */
html.dark .ck.ck-sticky-panel__content {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
}

/* CKEditor image captions in dark mode */
html.dark .ck.ck-editor__editable figcaption {
    color: rgb(156, 163, 175) !important; /* gray-400 */
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* CKEditor media embed in dark mode */
html.dark .ck.ck-editor__editable .ck-media__wrapper {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* CKEditor horizontal rule in dark mode */
html.dark .ck.ck-editor__editable hr {
    background-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor special characters grid in dark mode */
html.dark .ck.ck-character-grid {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

html.dark .ck.ck-character-grid .ck-character-grid__tile {
    color: rgb(209, 213, 219) !important; /* gray-300 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

html.dark .ck.ck-character-grid .ck-character-grid__tile:hover {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
}

/* CKEditor find and replace in dark mode */
html.dark .ck.ck-find-and-replace-form {
    background-color: rgb(31, 41, 55) !important; /* gray-800 */
}

html.dark .ck.ck-find-and-replace-form__input {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}

/* CKEditor source editing mode in dark mode */
html.dark .ck.ck-source-editing-area {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
}

html.dark .ck.ck-source-editing-area textarea {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
    color: rgb(243, 244, 246) !important; /* gray-100 */
    border-color: rgb(75, 85, 99) !important; /* gray-600 */
}