/* Quill Editor Dark Theme Styles */

.dark .ql-toolbar.ql-snow {
    @apply bg-gray-700 border-gray-600;
}

.dark .ql-container.ql-snow {
    @apply bg-gray-800 border-gray-600 text-gray-100;
}

.dark .ql-editor.ql-blank::before {
    @apply text-gray-400;
}

.dark .ql-snow .ql-stroke {
    @apply stroke-gray-300;
}

.dark .ql-snow .ql-fill {
    @apply fill-gray-300;
}

.dark .ql-snow .ql-picker-label {
    @apply text-gray-300 border-gray-600;
}

.dark .ql-snow .ql-picker-label:hover {
    @apply text-blue-400;
}

.dark .ql-snow .ql-picker-label:hover .ql-stroke {
    @apply stroke-blue-400;
}

.dark .ql-snow .ql-picker-options {
    @apply bg-gray-700 border-gray-600 text-gray-200;
}

.dark .ql-snow .ql-picker-item {
    @apply text-gray-200;
}

.dark .ql-snow .ql-picker-item:hover {
    @apply text-blue-400 bg-gray-600;
}

.dark .ql-snow .ql-picker.ql-expanded .ql-picker-label {
    @apply border-blue-500;
}

.dark .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    @apply stroke-blue-500;
}

.dark .ql-snow .ql-tooltip {
    @apply bg-gray-700 border-gray-600 text-gray-200 shadow-lg;
}

.dark .ql-snow .ql-tooltip input[type=text] {
    @apply bg-gray-800 border-gray-600 text-gray-200;
}

.dark .ql-snow .ql-tooltip input[type=text]:focus {
    @apply border-blue-500 outline-none;
}

.dark .ql-snow .ql-tooltip a.ql-preview {
    @apply text-blue-400;
}

.dark .ql-snow .ql-tooltip a.ql-action::after,
.dark .ql-snow .ql-tooltip a.ql-remove::before {
    @apply text-gray-200;
}

.dark .ql-snow .ql-tooltip a.ql-action:hover::after,
.dark .ql-snow .ql-tooltip a.ql-remove:hover::before {
    @apply text-blue-400;
}

.dark .ql-snow .ql-tooltip::before {
    @apply text-gray-200;
}

.dark .ql-snow.ql-toolbar button:hover,
.dark .ql-snow .ql-toolbar button:hover {
    @apply text-blue-400;
}

.dark .ql-snow.ql-toolbar button:hover .ql-stroke,
.dark .ql-snow .ql-toolbar button:hover .ql-stroke {
    @apply stroke-blue-400;
}

.dark .ql-snow.ql-toolbar button:hover .ql-fill,
.dark .ql-snow .ql-toolbar button:hover .ql-fill {
    @apply fill-blue-400;
}

.dark .ql-snow.ql-toolbar button.ql-active,
.dark .ql-snow .ql-toolbar button.ql-active {
    @apply text-blue-500;
}

.dark .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.dark .ql-snow .ql-toolbar button.ql-active .ql-stroke {
    @apply stroke-blue-500;
}

.dark .ql-snow.ql-toolbar button.ql-active .ql-fill,
.dark .ql-snow .ql-toolbar button.ql-active .ql-fill {
    @apply fill-blue-500;
}