/* ============================================
   INLINE EDITOR
   ============================================ */
/* Wrapper */
.inline-editor-wrapper {
  position: relative;
  width: 100%;
}
/* Label */
.inline-editor-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--mud-palette-text-secondary);
}
/* Toolbar */
.inline-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  flex-wrap: wrap;
  z-index: 10;
}
.toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--mud-palette-lines-default);
  margin: 0 4px;
}
/* Content Area */
.inline-editor-content {
  border: 1px dashed transparent;
  cursor: text;
  outline: none;
  word-wrap: break-word;
}
.inline-editor-content:hover:not([contenteditable="false"]) {
  border-color: rgba(255, 255, 255, 0.3);
}
.inline-editor-content.focused {
  border-color: var(--mud-palette-primary);
  background: rgba(255, 255, 255, 0.08);
}
.inline-editor-content[contenteditable="false"] {
  cursor: default;
  opacity: 0.6;
}
.inline-editor-content:empty:before {
  content: attr(data-placeholder);
  color: var(--mud-palette-text-disabled);
  font-style: italic;
}
/* Character Count */
.inline-editor-char-count {
  font-size: 11px;
  color: var(--mud-palette-text-secondary);
  text-align: right;
  margin-top: 4px;
}
/* ============================================
   COLOR PICKER STYLES
   ============================================ */
.color-picker-container {
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inline-color-picker {
  width: auto !important;
}
.inline-color-picker .mud-picker-color-grid {
  gap: 2px;
}
.inline-color-picker .mud-picker-color-dot {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}
/* ============================================
   LIST STYLES
   ============================================ */
.inline-editor-content ul,
.inline-editor-content ol {
  margin: 8px 0;
  padding-left: 40px;
  list-style-position: outside;
}
.inline-editor-content ul {
  list-style-type: disc;
}
.inline-editor-content ol {
  list-style-type: decimal;
}
.inline-editor-content li {
  margin: 4px 0;
}
/* Nested Lists */
.inline-editor-content ul ul,
.inline-editor-content ol ol,
.inline-editor-content ul ol,
.inline-editor-content ol ul {
  margin: 4px 0;
  padding-left: 40px;
}
.inline-editor-content ul ul {
  list-style-type: circle;
}
.inline-editor-content ul ul ul {
  list-style-type: square;
}
.inline-editor-content ol ol {
  list-style-type: lower-alpha;
}
.inline-editor-content ol ol ol {
  list-style-type: lower-roman;
}
/* Blockquote (browser fallback for indent) */
.inline-editor-content blockquote {
  margin: 4px 0 4px 40px;
  padding: 0;
  border: none;
  background: transparent;
  font-style: normal;
}