/* Trix editor theme - supports light and dark mode */

/* Light theme (default) */
:root {
  --trix-editor-bg: #ffffff;
  --trix-editor-text: #111827;
  --trix-toolbar-bg: #f9fafb;
  --trix-toolbar-border: #e5e7eb;
  --trix-button-color: #6b7280;
  --trix-button-hover-bg: #e5e7eb;
  --trix-button-hover-color: #111827;
  --trix-button-active-bg: #2563eb;
  --trix-button-active-color: #ffffff;
  --trix-content-text: #111827;
  --trix-content-muted: #374151;
  --trix-content-code-bg: #f3f4f6;
  --trix-content-code-text: #374151;
  --trix-content-blockquote-border: #42A8CE;
  --trix-content-link: #42A8CE;
  --trix-content-link-hover: #3899bc;
  --trix-content-caption: #6b7280;
  --trix-attachment-bg: #f3f4f6;
  --trix-attachment-text: #374151;
  --trix-attachment-name: #2563eb;
  --trix-icon-filter: none;
  --trix-icon-hover-filter: none;
  --trix-icon-active-filter: invert(1) brightness(1.2);
}

/* Dark theme */
.dark {
  --trix-editor-bg: #1f2937;
  --trix-editor-text: #ffffff;
  --trix-toolbar-bg: #1f2937;
  --trix-toolbar-border: #374151;
  --trix-button-color: #9ca3af;
  --trix-button-hover-bg: #374151;
  --trix-button-hover-color: #ffffff;
  --trix-button-active-bg: #2563eb;
  --trix-button-active-color: #ffffff;
  --trix-content-text: #ffffff;
  --trix-content-muted: #d1d5db;
  --trix-content-code-bg: #374151;
  --trix-content-code-text: #d1d5db;
  --trix-content-blockquote-border: #42A8CE;
  --trix-content-link: #42A8CE;
  --trix-content-link-hover: #3899bc;
  --trix-content-caption: #9ca3af;
  --trix-attachment-bg: #374151;
  --trix-attachment-text: #d1d5db;
  --trix-attachment-name: #60a5fa;
  --trix-icon-filter: invert(1) brightness(0.8);
  --trix-icon-hover-filter: invert(1) brightness(1);
  --trix-icon-active-filter: invert(1) brightness(1.2);
}

.trix-content p,
.trix-content h1,
.trix-content h2,
.trix-content h3,
.trix-content li,
.trix-content blockquote,
.trix-content div {
  unicode-bidi: plaintext;
}

/* Trix editor */
trix-editor {
  background-color: var(--trix-editor-bg) !important;
  color: var(--trix-editor-text) !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 300px !important;
  padding: 1rem !important;
  direction: rtl;
  text-align: right;
}

trix-editor:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Toolbar */
trix-toolbar .trix-button-row {
  background-color: var(--trix-toolbar-bg) !important;
  border-bottom: 1px solid var(--trix-toolbar-border) !important;
  padding: 0.5rem !important;
  gap: 0.25rem !important;
  flex-wrap: wrap !important;
}

trix-toolbar .trix-button {
  background-color: transparent !important;
  border: none !important;
  color: var(--trix-button-color) !important;
  border-radius: 0.375rem !important;
  transition: all 0.2s !important;
}

trix-toolbar .trix-button:hover {
  background-color: var(--trix-button-hover-bg) !important;
  color: var(--trix-button-hover-color) !important;
}

trix-toolbar .trix-button.trix-active {
  background-color: var(--trix-button-active-bg) !important;
  color: var(--trix-button-active-color) !important;
}

trix-toolbar .trix-button-group {
  border: none !important;
  gap: 0.25rem !important;
}

trix-toolbar .trix-button-group:not(:first-child) {
  border-right: 1px solid var(--trix-toolbar-border) !important;
  padding-right: 0.5rem !important;
}

trix-toolbar .trix-button--icon {
  width: 2rem !important;
  height: 2rem !important;
}

/* Content */
.trix-content {
  color: var(--trix-content-text) !important;
  direction: rtl !important;
  text-align: right !important;
}

.trix-content h1 {
  font-size: 1.875rem !important;
  font-weight: 700 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  color: var(--trix-content-text) !important;
}

.trix-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--trix-content-text) !important;
}

.trix-content h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--trix-content-text) !important;
}

.trix-content p {
  margin-bottom: 0.75rem !important;
  line-height: 1.7 !important;
  color: var(--trix-content-muted) !important;
}

.trix-content ul {
  list-style-type: disc !important;
  padding-right: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

.trix-content ol {
  list-style-type: decimal !important;
  padding-right: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

.trix-content blockquote {
  border-right: 4px solid var(--trix-content-blockquote-border) !important;
  border-left: 0px !important;
  padding-right: 1rem !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  color: var(--trix-content-muted) !important;
}

.trix-content code {
  background-color: var(--trix-content-code-bg) !important;
  padding: 0.125rem 0.375rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-family: monospace !important;
  color: var(--trix-content-code-text) !important;
}

.trix-content pre {
  background-color: var(--trix-content-code-bg) !important;
  padding: 0.75rem !important;
  border-radius: 0.5rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  overflow-x: auto !important;
}

.trix-content pre code {
  background-color: transparent !important;
  padding: 0 !important;
}

.trix-content a {
  color: var(--trix-content-link) !important;
  text-decoration: underline !important;
}

.trix-content a:hover {
  color: var(--trix-content-link-hover) !important;
}

.trix-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.5rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.trix-content figure {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.trix-content figcaption {
  font-size: 0.875rem !important;
  color: var(--trix-content-caption) !important;
  text-align: center !important;
  margin-top: 0.25rem !important;
}

.trix-content .attachment--preview {
  width: auto !important;
  max-width: 100%;
}

/* Attachments */
.attachment {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background-color: transparent;
  border-radius: 0.25rem;
  color: var(--trix-attachment-text);
}

.attachment .attachment-name {
  color: var(--trix-attachment-name);
}

/* Icons */
trix-toolbar .trix-button--icon::before {
  filter: var(--trix-icon-filter) !important;
}

trix-toolbar .trix-button--icon:hover::before {
  filter: var(--trix-icon-hover-filter) !important;
}

trix-toolbar .trix-button.trix-active .trix-button--icon::before {
  filter: var(--trix-icon-active-filter) !important;
}