/* Gedankenfänger Feedback Form Styles */

/* Remove focus ring from Lexxy editor */
lexxy-editor,
lexxy-editor *,
[contenteditable="true"],
.ContentEditable__root {
  outline: none !important;
  box-shadow: none !important;
}

lexxy-editor:focus,
lexxy-editor:focus-visible,
lexxy-editor *:focus,
lexxy-editor *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #374151 !important;
}

/* Dark Mode - Override Lexxy CSS Variables */
.dark {
  --lexxy-color-ink-lightest: #4b5563;
  --lexxy-color-selected: #17bebb;
  --lexxy-color-ink: #f9fafb;
  --lexxy-color-background: rgb(23 23 23 / var(--tw-bg-opacity, 1));
  --lexxy-color-border: #374151;
}

.dark lexxy-editor {
  background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)) !important;
  color: #f9fafb !important;
  border-color: #374151 !important;
}

.dark lexxy-editor button,
.dark lexxy-editor summary {
  color: #f9fafb !important;
  background-color: transparent !important;
  border-color: #374151 !important;
}

.dark .lexxy-editor__toolbar-button[aria-pressed="true"] {
  background-color: #17bebb !important;
  color: white !important;
}

/* Ensure buttons are always clickable */
lexxy-editor button {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Hide overflow menu (3 dots) - buttons are hidden by JS */
lexxy-editor summary,
lexxy-editor details {
  display: none !important;
}

/* Editor sizing */
lexxy-editor {
  display: block !important;
  padding-top: 8px !important; /* Space between toolbar and content */
  padding-left: 8px !important; /* Space on left side for buttons */
  border: 1px solid #e5e7eb !important; /* Light mode border */
  border-radius: 0px !important; /* rounded-md */
}

/* Dark mode border */
.dark lexxy-editor {
  border: 1px solid #374151 !important;
}

lexxy-editor [contenteditable] {
  min-height: 100px !important;
  padding: 10px !important;
}

/* Remove unwanted margins from global trix-content styles */
lexxy-editor p,
lexxy-editor div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure formatting is visible - Lexxy uses specific classes */
lexxy-editor strong,
lexxy-editor b,
lexxy-editor .lexxy-content__bold {
  font-weight: bold !important;
}

lexxy-editor em,
lexxy-editor i,
lexxy-editor .lexxy-content__italic {
  font-style: italic !important;
}

/* Bold + Italic combination - Lexxy uses both classes on same element */
lexxy-editor .lexxy-content__bold.lexxy-content__italic {
  font-weight: bold !important;
  font-style: italic !important;
}

lexxy-editor u {
  text-decoration: underline !important;
}

lexxy-editor s,
lexxy-editor strike,
lexxy-editor del {
  text-decoration: line-through !important;
}

/* Image styling */
lexxy-editor img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5rem 0;
}

/* Placeholder styling - controlled by JS .has-content class */
lexxy-editor [contenteditable]::before {
  pointer-events: none;
  opacity: 0.3;
}

lexxy-editor:focus-within [contenteditable][data-placeholder]::before,
lexxy-editor [contenteditable][data-placeholder]:focus::before,
lexxy-editor [contenteditable]:focus::before {
  content: "" !important;
  opacity: 0 !important;
  display: none !important;
}