/* WB Design System — WYSIWYG (Quill Snow dark-theme overrides) */

/* Wrapper */
.wb-wysiwyg-wrapper {
	border: 0.125rem solid rgba(255, 255, 255, 0.3);
	border-radius: var(--wb-ctx-radius, 0.9375rem);
	background: rgba(255, 255, 255, 0.15);
	transition: border-color 0.2s, background 0.2s;
}

/* Focus state */
.wb-wysiwyg-focused {
	border-color: var(--wb-ctx-primary);
	background: rgba(255, 255, 255, 0.25);
}

/* Error state */
.wb-wysiwyg-wrapper.wb-field-error {
	border-color: #e74c3c !important;
	background: rgba(231, 76, 60, 0.15) !important;
	outline: 0.125rem solid #e74c3c;
	outline-offset: 0.125rem;
}

/* Quill container — remove default border */
.wb-wysiwyg-wrapper .ql-container.ql-snow {
	border: none;
	border-radius: 0 0 calc(var(--wb-ctx-radius, 0.9375rem) - 0.125rem) calc(var(--wb-ctx-radius, 0.9375rem) - 0.125rem);
	overflow: hidden;
	font-size: 0.9375rem;
	font-family: inherit;
	color: var(--wb-ctx-text, #fff);
}

/* Toolbar — sticky so it stays reachable on long descriptions */
.wb-wysiwyg-wrapper .ql-toolbar.ql-snow {
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 1);
	background: rgba(255, 255, 255, 1);
	border-radius: calc(var(--wb-ctx-radius, 0.9375rem) - 0.125rem) calc(var(--wb-ctx-radius, 0.9375rem) - 0.125rem) 0 0;
	padding: 0.375rem 0.5rem;
	position: sticky;
	top: 0;
	z-index: 10;
}

.wb-wysiwyg-wrapper .ql-toolbar.ql-snow * {
	color: var(--wb-ctx-primary) !important;
	stroke: var(--wb-ctx-primary) !important;
}

/* Toolbar button icons: default white */
.wb-wysiwyg-wrapper .ql-toolbar .ql-stroke {
	stroke: var(--wb-ctx-text, #fff);
}

.wb-wysiwyg-wrapper .ql-toolbar .ql-fill {
	fill: var(--wb-ctx-text, #fff);
}

.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label {
	color: var(--wb-ctx-text, #fff);
}

/* Toolbar button hover/active */
.wb-wysiwyg-wrapper .ql-toolbar button:hover .ql-stroke,
.wb-wysiwyg-wrapper .ql-toolbar button.ql-active .ql-stroke,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label:hover .ql-stroke,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label.ql-active .ql-stroke {
	stroke: var(--wb-ctx-primary);
}

.wb-wysiwyg-wrapper .ql-toolbar button:hover .ql-fill,
.wb-wysiwyg-wrapper .ql-toolbar button.ql-active .ql-fill {
	fill: var(--wb-ctx-primary);
}

.wb-wysiwyg-wrapper .ql-toolbar button:hover,
.wb-wysiwyg-wrapper .ql-toolbar button.ql-active,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label:hover,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label.ql-active {
	color: var(--wb-ctx-primary);
}

/* Picker dropdown arrow */
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label:hover::before,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-label.ql-active::before {
	color: var(--wb-ctx-primary);
}

/* Picker dropdown */
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-options {
	background: var(--wb-ctx-text, #fff);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	padding: 0.25rem 0;
}

.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-item:hover,
.wb-wysiwyg-wrapper .ql-toolbar .ql-picker-item.ql-selected {
	color: var(--wb-ctx-primary);
}

/* Editor area */
.wb-wysiwyg-wrapper .ql-editor {
	min-height: 8rem;
	padding: 0.625rem 0.875rem;
	color: var(--wb-ctx-text, #fff);
	line-height: 1.5;
}

.wb-wysiwyg-wrapper  .ql-editor > * {
	margin-bottom: 10px !important;
}

/* Placeholder */
.wb-wysiwyg-wrapper .ql-editor.ql-blank::before {
	color: rgba(255, 255, 255, 0.6);
	font-style: normal;
}

/* Content styling: links */
.wb-wysiwyg-wrapper .ql-editor a {
	color: var(--wb-ctx-primary);
}

/* Content styling: blockquote */
.wb-wysiwyg-wrapper .ql-editor blockquote {
	border-left: 0.25rem solid var(--wb-ctx-primary);
	padding-left: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

/* Tooltip (link editor) */
.wb-wysiwyg-wrapper .ql-tooltip {
	background: rgba(30, 30, 30, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	color: var(--wb-ctx-text, #fff);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.wb-wysiwyg-wrapper .ql-tooltip input[type="text"] {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0.25rem;
	color: var(--wb-ctx-text, #fff);
}

.wb-wysiwyg-wrapper .ql-tooltip a {
	color: var(--wb-ctx-primary);
}

/* Character counter */
.wb-wysiwyg-counter {
	text-align: right;
	font-size: 0.75rem;
	color: var(--wb-ctx-text, #fff);
	margin-top: 0.25rem;
}

/* German labels for Quill header picker (!important to override quill snow defaults) */
.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-label::before,
.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-item::before {
	content: 'Normal' !important;
}

.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
	content: 'Überschrift 2' !important;
}

.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
	content: 'Überschrift 3' !important;
}

.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.wb-wysiwyg-wrapper .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
	content: 'Überschrift 4' !important;
}