/* Lexxy dark theme adjustments and readability fixes */

/* Ensure the editable content is readable on dark backgrounds */
lexxy-editor [contenteditable="true"] {
  color: #ffffff !important;
}

/* Placeholder color in dark mode */
lexxy-editor [contenteditable="true"] .placeholder,
lexxy-editor .placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Make sure paragraphs inherit readable color */
lexxy-editor [contenteditable="true"] p {
  color: inherit !important;
}

/* Improve overall contrast */
lexxy-editor {
  color: #ffffff !important;
}

/* Toolbar buttons/icons contrast */
lexxy-editor .toolbar, 
lexxy-editor .toolbar *,
lexxy-editor .toolbar svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Rendered Action Text (lexxy-content) should be readable on dark background */
.lexxy-content {
  color: #ffffff !important;
}

.lexxy-content p,
.lexxy-content li,
.lexxy-content blockquote,
.lexxy-content code,
.lexxy-content pre,
.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  color: #ffffff !important;
}

.lexxy-content a {
  color: #5eead4 !important; /* teal-300 */
  text-decoration: underline;
}

/* Ensure lists display correctly immediately (prevent FOUC) */
.lexxy-content ul {
  list-style-type: disc !important;
  padding-left: 1.625em !important;
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}

.lexxy-content ol {
  list-style-type: decimal !important;
  padding-left: 1.625em !important;
  margin-top: 1.25em !important;
  margin-bottom: 1.25em !important;
}

.lexxy-content li {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
  padding-left: 0.375em !important;
}

.lexxy-content ul > li,
.lexxy-content ol > li {
  display: list-item !important;
}

/* Nested lists */
.lexxy-content ul ul,
.lexxy-content ul ol,
.lexxy-content ol ul,
.lexxy-content ol ol {
  margin-top: 0.75em !important;
  margin-bottom: 0.75em !important;
}

/* Toolbar buttons: gray backgrounds for readability in dark theme */
lexxy-editor [role="toolbar"] button,
lexxy-editor [data-toolbar] button,
lexxy-editor .toolbar button,
lexxy-editor .lexxy-toolbar button,
lexxy-editor .editor-toolbar button {
  background-color: #374151 !important; /* gray-700 */
  color: #ffffff !important;
  border: 1px solid var(--color-tiber-800) !important;
}

lexxy-editor [role="toolbar"] button:hover,
lexxy-editor [data-toolbar] button:hover,
lexxy-editor .toolbar button:hover,
lexxy-editor .lexxy-toolbar button:hover,
lexxy-editor .editor-toolbar button:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

lexxy-editor [role="toolbar"] button:focus,
lexxy-editor [data-toolbar] button:focus,
lexxy-editor .toolbar button:focus,
lexxy-editor .lexxy-toolbar button:focus,
lexxy-editor .editor-toolbar button:focus {
  outline: 2px solid #14b8a6 !important; /* teal-500 */
  outline-offset: 0;
}

lexxy-editor [role="toolbar"] button[aria-pressed="true"],
lexxy-editor [data-toolbar] button[aria-pressed="true"],
lexxy-editor .toolbar button[aria-pressed="true"],
lexxy-editor .lexxy-toolbar button[aria-pressed="true"],
lexxy-editor .editor-toolbar button[aria-pressed="true"],
lexxy-editor [role="toolbar"] button.active,
lexxy-editor [data-toolbar] button.active,
lexxy-editor .toolbar button.active,
lexxy-editor .lexxy-toolbar button.active,
lexxy-editor .editor-toolbar button.active {
  background-color: #52525b !important; /* zinc-600 */
  border-color: #14b8a6 !important; /* teal-500 */
}

lexxy-editor [role="toolbar"] button svg,
lexxy-editor [data-toolbar] button svg,
lexxy-editor .toolbar button svg,
lexxy-editor .lexxy-toolbar button svg,
lexxy-editor .editor-toolbar button svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* Fallback: ensure ANY button within the editor is readable */
lexxy-editor button {
  background-color: #374151 !important; /* gray-700 */
  color: #ffffff !important;
  border-color: var(--color-tiber-800) !important;
}

lexxy-editor button:hover {
  background-color: #4b5563 !important; /* gray-600 */
}

/* Editor borders: only apply to the text area (not the toolbar) */
lexxy-editor [contenteditable="true"],
lexxy-editor .editor-content,
lexxy-editor .content {
  border: 1px solid var(--color-tiber-400) !important;
  border-radius: 0.375rem !important; /* rounded-md */
}

/* Remove borders around the toolbar entirely */
lexxy-editor [role="toolbar"],
lexxy-editor .toolbar,
lexxy-editor .lexxy-toolbar,
lexxy-editor .editor-toolbar {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 5px !important;
}

/* Remove any border/shadow on the editor wrapper itself */
lexxy-editor {
  border: none !important;
  box-shadow: none !important;
}

/* Fallback: remove borders from any other wrappers inside the editor, but keep button borders and the text area */
lexxy-editor *:not([contenteditable="true"]):not(.editor-content):not(.content):not(button) {
  border: none !important;
  box-shadow: none !important;
}

/* Focus ring inside editor area */
lexxy-editor [contenteditable="true"]:focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1px var(--color-tiber-400) !important;
}