/* Rich Editor (Quill) Component Styles */
/* Integrate Quill with the app's design system */

.rich-editor-container {
    /* Basic styling already in JS, but can override here if needed */
}

/* Quill toolbar styling */
.ql-toolbar {
    border: none !important;
    border-bottom: 1px solid var(--gray-300) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    background: var(--gray-50) !important;
    padding: 0.5rem !important;
}

.ql-toolbar .ql-picker-label {
    color: var(--gray-700) !important;
}

.ql-toolbar .ql-stroke {
    stroke: var(--gray-600) !important;
}

.ql-toolbar .ql-fill {
    fill: var(--gray-600) !important;
}

.ql-toolbar button:hover {
    background: var(--gray-200) !important;
}

.ql-toolbar button.ql-active {
    background: var(--primary-100) !important;
    color: var(--primary-700) !important;
}

/* Quill editor container */
.ql-container {
    border: none !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

.ql-editor {
    padding: 1rem !important;
    min-height: 120px !important;
    color: var(--gray-900) !important;
}

.ql-editor.ql-blank::before {
    color: var(--gray-500) !important;
    font-style: normal !important;
}

/* Focus states */
.ql-toolbar:focus-within,
.ql-container:focus-within {
    border-color: var(--primary-300) !important;
    box-shadow: 0 0 0 3px var(--primary-100) !important;
}

/* Hide Quill's default border since we handle it */
.ql-editor {
    border: none !important;
}

/* Ensure proper spacing in forms */
.rich-editor-container + .form-help {
    margin-top: 0.5rem;
}