/* Rich Text Editor Styles */

.rich-text-editor-wrapper {
    position: relative;
    width: 100%;
}

.rich-text-editor {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
    min-height: 150px;
}

/* MudBlazor Dark Theme Support */
.mud-theme-dark .rich-text-editor {
    background: var(--mud-palette-surface, #1e1e1e);
    border-color: var(--mud-palette-lines-default, rgba(255, 255, 255, 0.12));
}

/* Quill toolbar styling */
.ql-toolbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: var(--mud-palette-background-grey, #fafafa);
}

.mud-theme-dark .ql-toolbar {
    background: var(--mud-palette-surface, #2d2d2d);
    border-color: var(--mud-palette-lines-default, rgba(255, 255, 255, 0.12));
}

/* Quill editor container */
.ql-container {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Quill editor content area */
.ql-editor {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, 0.87));
}

.mud-theme-dark .ql-editor {
    color: var(--mud-palette-text-primary, rgba(255, 255, 255, 0.87));
}

.ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, 0.6));
}

.mud-theme-dark .ql-editor.ql-blank::before {
    color: var(--mud-palette-text-secondary, rgba(255, 255, 255, 0.5));
}

/* Toolbar button styling for dark theme */
.mud-theme-dark .ql-toolbar button,
.mud-theme-dark .ql-toolbar .ql-picker-label {
    color: rgba(255, 255, 255, 0.7);
}

.mud-theme-dark .ql-toolbar button:hover,
.mud-theme-dark .ql-toolbar .ql-picker-label:hover {
    color: rgba(255, 255, 255, 0.9);
}

.mud-theme-dark .ql-toolbar button.ql-active,
.mud-theme-dark .ql-toolbar .ql-picker-label.ql-active {
    color: var(--mud-palette-primary, #594ae2);
}

/* Toolbar stroke colors for dark theme */
.mud-theme-dark .ql-stroke {
    stroke: rgba(255, 255, 255, 0.7);
}

.mud-theme-dark .ql-toolbar button:hover .ql-stroke,
.mud-theme-dark .ql-toolbar .ql-picker-label:hover .ql-stroke {
    stroke: rgba(255, 255, 255, 0.9);
}

.mud-theme-dark .ql-toolbar button.ql-active .ql-stroke,
.mud-theme-dark .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--mud-palette-primary, #594ae2);
}

/* Toolbar fill colors for dark theme */
.mud-theme-dark .ql-fill {
    fill: rgba(255, 255, 255, 0.7);
}

.mud-theme-dark .ql-toolbar button:hover .ql-fill,
.mud-theme-dark .ql-toolbar .ql-picker-label:hover .ql-fill {
    fill: rgba(255, 255, 255, 0.9);
}

.mud-theme-dark .ql-toolbar button.ql-active .ql-fill,
.mud-theme-dark .ql-toolbar .ql-picker-label.ql-active .ql-fill {
    fill: var(--mud-palette-primary, #594ae2);
}

/* Read-only display styling */
.formatted-text-display {
    padding: 12px;
    line-height: 1.6;
    word-wrap: break-word;
    color: var(--mud-palette-text-primary);
}

.formatted-text-display h1 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.formatted-text-display h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.formatted-text-display h3 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
}

.formatted-text-display ul,
.formatted-text-display ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.formatted-text-display p {
    margin-bottom: 0.5em;
}

.formatted-text-display strong {
    font-weight: 600;
}

.formatted-text-display em {
    font-style: italic;
}