/* Rich Text Editor Styles */
.rich-text-editor {
    border: 1px solid var(--dp-border-strong);
    border-radius: 0.375rem;
    background-color: var(--dp-surface-input-focus);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.rich-text-editor:focus-within {
    border-color: var(--dp-interactive-primary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 122, 130, 0.25);
}

.rich-text-editor.is-invalid {
    border-color: var(--dp-status-danger);
}

.rich-text-editor.is-invalid:focus-within {
    border-color: var(--dp-status-danger);
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

/* Quill Editor Toolbar */
.ql-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--dp-border-strong) !important;
    background-color: var(--dp-surface-secondary);
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 6px 8px;
}

.ql-toolbar .ql-formats {
    margin-right: 12px;
}

/* Constrain toolbar button & icon sizes */
.ql-snow.ql-toolbar button {
    width: 26px;
    height: 26px;
    padding: 3px;
}

.ql-snow.ql-toolbar button svg {
    width: 16px;
    height: 16px;
}

.ql-snow.ql-toolbar .ql-picker {
    height: 26px;
    font-size: 13px;
}

.ql-snow.ql-toolbar .ql-picker-label {
    padding: 2px 4px;
}

.ql-toolbar .ql-stroke {
    fill: none;
    stroke: var(--dp-text-secondary);
}

.ql-toolbar .ql-fill,
.ql-toolbar .ql-stroke.ql-fill {
    fill: var(--dp-text-secondary);
}

.ql-toolbar button:hover .ql-stroke {
    stroke: var(--dp-text-primary);
}

.ql-toolbar button:hover .ql-fill,
.ql-toolbar button:hover .ql-stroke.ql-fill {
    fill: var(--dp-text-primary);
}

.ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--dp-interactive-primary);
}

.ql-toolbar button.ql-active .ql-fill,
.ql-toolbar button.ql-active .ql-stroke.ql-fill {
    fill: var(--dp-interactive-primary);
}

/* Quill Editor Container */
.ql-container {
    border: none !important;
    font-size: 14px;
    border-radius: 0 0 0.375rem 0.375rem;
}

.ql-editor {
    padding: 12px 15px;
    line-height: 1.6;
    min-height: 200px;
}

.ql-editor.ql-blank::before {
    color: var(--dp-text-secondary);
    font-style: italic;
    left: 15px;
    right: 15px;
}

/* Custom Quill Snow Theme adjustments */
.ql-snow .ql-tooltip {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid var(--dp-border-default);
    border-radius: 0.375rem;
}

.ql-snow .ql-tooltip input[type=text] {
    border: 1px solid var(--dp-border-strong);
    border-radius: 0.25rem;
    padding: 0.375rem 0.75rem;
}

.ql-snow .ql-tooltip a.ql-action::after,
.ql-snow .ql-tooltip a.ql-remove::after {
    color: var(--dp-interactive-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ql-toolbar {
        padding: 6px 8px;
    }

    .ql-toolbar .ql-formats {
        margin-right: 8px;
    }

    .ql-editor {
        padding: 10px 12px;
        min-height: 150px;
    }
}

/* Loading state */
.rich-text-editor.loading {
    opacity: 0.6;
    pointer-events: none;
}

.rich-text-editor.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--dp-surface-secondary);
    border-top: 2px solid var(--dp-interactive-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error state */
.rich-text-editor-error {
    color: var(--dp-status-danger);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Help text */
.rich-text-editor-help {
    color: var(--dp-text-secondary);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Word paste cleanup styles */
.ql-editor p {
    margin-bottom: 1em;
}

.ql-editor p:last-child {
    margin-bottom: 0;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.ql-editor h1:first-child,
.ql-editor h2:first-child,
.ql-editor h3:first-child,
.ql-editor h4:first-child,
.ql-editor h5:first-child,
.ql-editor h6:first-child {
    margin-top: 0;
}

.ql-editor ul,
.ql-editor ol {
    margin-bottom: 1em;
}

.ql-editor blockquote {
    border-left: 4px solid var(--dp-border-default);
    margin: 1em 0;
    padding: 0.5em 0 0.5em 1em;
    background-color: var(--dp-surface-secondary);
}