/* Light and dark mode overrides for Lexxy content */

/* Light mode styles for Lexxy editor */
lexxy-editor {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
  border-radius: 0.375rem;
}

lexxy-editor:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
  outline: none !important;
}

/* Light mode toolbar styles */
lexxy-toolbar {
  background-color: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
  border-radius: 0.375rem 0.375rem 0 0;
}

lexxy-toolbar button {
  color: hsl(var(--muted-foreground)) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
  /* Make toolbar buttons smaller */
  width: 2rem !important;
  height: 2rem !important;
  padding: 0.25rem !important;
  font-size: 0.75rem !important;
  line-height: 1 !important;
}

lexxy-toolbar button svg {
  width: 1rem !important;
  height: 1rem !important;
}

lexxy-toolbar button:hover {
  background-color: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

lexxy-toolbar button.active {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

lexxy-toolbar button:disabled {
  color: hsl(var(--muted-foreground) / 0.5) !important;
  opacity: 0.5;
}

/* Light mode content styles */
.lexxy-content {
  color: hsl(var(--foreground));
  padding: 0.5rem; /* Add padding to match the form field styling */
}

.lexxy-content h1,
.lexxy-content h2,
.lexxy-content h3,
.lexxy-content h4,
.lexxy-content h5,
.lexxy-content h6 {
  color: hsl(var(--foreground));
}

.lexxy-content p {
  color: hsl(var(--foreground));
  margin: 0.25rem 0; /* Reduce paragraph margins to normal line spacing */
}

.lexxy-content a {
  color: hsl(var(--primary));
}

.lexxy-content a:hover {
  color: hsl(var(--primary) / 0.8);
}

/* Dark mode overrides for Lexxy content */

/* Dark mode styles for lexxy-content wrapper */
.dark .lexxy-content {
  color: hsl(var(--foreground)); /* Use CSS custom property for text color */
  padding: 0.5rem; /* Add padding to match the form field styling */
}

.dark .lexxy-content h1,
.dark .lexxy-content h2,
.dark .lexxy-content h3,
.dark .lexxy-content h4,
.dark .lexxy-content h5,
.dark .lexxy-content h6 {
  color: hsl(var(--foreground)); /* Use CSS custom property for headings */
}

.dark .lexxy-content p {
  color: hsl(var(--foreground)); /* Use CSS custom property for paragraphs */
  margin: 0.25rem 0; /* Reduce paragraph margins to normal line spacing */
}

.dark .lexxy-content a {
  color: hsl(var(--primary)); /* Use CSS custom property for links */
}

.dark .lexxy-content a:hover {
  color: #93c5fd; /* lighter blue on hover */
}

.dark .lexxy-content strong,
.dark .lexxy-content b {
  color: #f9fafb; /* white bold text */
}

.dark .lexxy-content em,
.dark .lexxy-content i {
  color: #d1d5db; /* light gray italic text */
}

.dark .lexxy-content blockquote {
  border-left-color: #4b5563; /* gray border for blockquotes */
  color: #d1d5db; /* light gray blockquote text */
}

.dark .lexxy-content code {
  background-color: #374151; /* dark gray code background */
  color: #f9fafb; /* white code text */
  border: 1px solid #4b5563; /* gray border */
}

.dark .lexxy-content pre {
  background-color: #1f2937; /* very dark background for code blocks */
  color: #f9fafb; /* white text in code blocks */
  border: 1px solid #4b5563; /* gray border */
}

.dark .lexxy-content ul,
.dark .lexxy-content ol {
  color: #e5e7eb; /* light gray list text */
}

.dark .lexxy-content li {
  color: #e5e7eb; /* light gray list items */
}

.dark .lexxy-content hr {
  border-color: #4b5563; /* gray horizontal rules */
}

/* Action Text attachment styling in dark mode */
.dark .lexxy-content .attachment {
  background-color: #374151; /* dark background for attachments */
  border-color: #4b5563; /* gray border */
}

.dark .lexxy-content .attachment__caption {
  color: #d1d5db; /* light gray caption text */
}

.dark .lexxy-content .attachment__name {
  color: #f9fafb; /* white attachment name */
}

.dark .lexxy-content .attachment__size {
  color: #9ca3af; /* gray attachment size */
}

/* Table styling in dark mode */
.dark .lexxy-content table {
  border-color: #4b5563; /* gray table borders */
}

.dark .lexxy-content th {
  background-color: #374151; /* dark header background */
  color: #f9fafb; /* white header text */
  border-color: #4b5563; /* gray borders */
}

.dark .lexxy-content td {
  background-color: #1f2937; /* dark cell background */
  color: #e5e7eb; /* light gray cell text */
  border-color: #4b5563; /* gray borders */
}

/* Lexxy editor dark mode styles */
.dark lexxy-editor {
  background-color: hsl(var(--background)) !important; /* Use app's background color */
  color: hsl(var(--foreground)) !important; /* Use app's foreground color */
  border-color: hsl(var(--border)) !important; /* Use app's border color */
  border-radius: 0.375rem; /* Match your app's border radius */
}

.dark lexxy-editor:focus {
  border-color: hsl(var(--ring)) !important; /* Use app's focus ring color */
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important; /* Subtle focus shadow */
  outline: none !important;
}

/* Lexxy toolbar dark mode styles */
.dark lexxy-toolbar {
  background-color: hsl(var(--muted)) !important; /* Use app's muted background */
  border-color: hsl(var(--border)) !important; /* Use app's border color */
  border-radius: 0.375rem 0.375rem 0 0; /* Rounded top corners */
}

.dark lexxy-toolbar button {
  color: hsl(var(--muted-foreground)) !important; /* Use app's muted text color */
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0.25rem; /* Slightly rounded buttons */
  transition: all 0.2s ease; /* Smooth transitions */
}

.dark lexxy-toolbar button:hover {
  background-color: hsl(var(--accent)) !important; /* Use app's accent color */
  color: hsl(var(--accent-foreground)) !important; /* Use app's accent text */
}

.dark lexxy-toolbar button.active {
  background-color: hsl(var(--primary)) !important; /* Use app's primary color */
  color: hsl(var(--primary-foreground)) !important; /* Use app's primary text */
}

.dark lexxy-toolbar button:disabled {
  color: hsl(var(--muted-foreground) / 0.5) !important; /* Dimmed disabled text */
  opacity: 0.5;
}

/* Override any blue backgrounds that might be coming from Lexxy's default styles */
.dark lexxy-editor,
.dark .lexxy-editor,
.dark [data-lexxy-editor] {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Ensure the editor content area matches the app's styling */
.dark .lexxy-editor-content {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Additional overrides for any remaining blue backgrounds */
.dark [data-lexxy-editor] *,
.dark .lexxy-editor *,
.dark lexxy-editor * {
  background-color: transparent !important;
}

/* Override any inline styles that might be setting blue backgrounds */
.dark [style*="background-color: rgb(59, 130, 246)"],
.dark [style*="background-color: #3b82f6"],
.dark [style*="background-color: blue"] {
  background-color: hsl(var(--background)) !important;
}

/* Make sure the editor container doesn't have any unwanted backgrounds */
.dark .rich-text-area,
.dark .trix-content,
.dark .action-text-content {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Light mode overrides for editor containers */
.rich-text-area,
.trix-content,
.action-text-content {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Additional light mode overrides for any remaining blue backgrounds */
[data-lexxy-editor] *,
.lexxy-editor *,
lexxy-editor * {
  background-color: transparent !important;
}

/* Ensure proper padding for Lexxy editor content */
lexxy-editor .lexxy-editor-content,
[data-lexxy-editor] .lexxy-editor-content {
  padding: 0.5rem !important;
  min-height: 120px;
  line-height: 1.5; /* Set normal line height */
}

/* Fix paragraph spacing in Lexxy editor */
lexxy-editor p,
[data-lexxy-editor] p {
  margin: 0.25rem 0 !important; /* Minimal paragraph margins */
  line-height: 1.5;
}

/* Override any inline styles that might be setting blue backgrounds in light mode */
[style*="background-color: rgb(59, 130, 246)"],
[style*="background-color: #3b82f6"],
[style*="background-color: blue"] {
  background-color: hsl(var(--background)) !important;
}