/* Custom Marksmith styles for dark mode support */

/* Dark mode support for Marksmith editor */
.dark .marksmith-editor {
  background-color: rgb(31 41 55);
  color: rgb(209 213 219);
  border-color: rgb(75 85 99);
}

.dark .marksmith-toolbar {
  background-color: rgb(55 65 81);
  border-color: rgb(75 85 99);
}

.dark .marksmith-toolbar button {
  color: rgb(209 213 219);
}

.dark .marksmith-toolbar button:hover {
  background-color: rgb(75 85 99);
}

.dark .marksmith-toolbar button.active {
  background-color: rgb(99 102 241);
  color: white;
}

.dark .marksmith-preview {
  background-color: rgb(31 41 55);
  color: rgb(209 213 219);
  border-color: rgb(75 85 99);
}

.dark .marksmith-container textarea {
  background-color: rgb(17 24 39);
  color: rgb(209 213 219);
  border-color: rgb(75 85 99);
}

.dark .marksmith-container textarea:focus {
  border-color: rgb(99 102 241);
  outline-color: rgb(99 102 241);
}

/* Ensure proper styling for the markdown editor */
.marksmith-container {
  @apply rounded-lg border-2 border-gray-200 dark:border-gray-600 overflow-hidden;
}

.marksmith-container textarea {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 min-h-[300px] w-full resize-none focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400;
}

.marksmith-toolbar {
  @apply bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 p-2;
}

.marksmith-toolbar button {
  @apply px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors duration-150;
}

.marksmith-toolbar button.active {
  @apply bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300;
}

/* Preview pane styling */
.marksmith-preview {
  @apply bg-white dark:bg-gray-800 p-4 prose prose-sm dark:prose-invert max-w-none;
}