/* Trix Editor Styles */

/* Import Trix base styles from CDN */
@import url('https://ga.jspm.io/npm:trix@2.0.8/dist/trix.css');

/* Theme-aware overrides for Trix editor */
trix-toolbar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
}

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.125rem;
  justify-content: flex-start;
}

trix-toolbar .trix-button-group {
  display: flex;
  margin-right: 0.25rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.25rem;
  overflow: hidden;
}

trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0.125rem;
}

/* Hide link, quote, code buttons */
trix-toolbar .trix-button--icon[data-trix-attribute="href"],
trix-toolbar .trix-button--icon[data-trix-attribute="quote"],
trix-toolbar .trix-button--icon[data-trix-attribute="code"] {
  display: none;
}

trix-toolbar .trix-button {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: none;
  padding: 0.2rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

trix-toolbar .trix-button:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

trix-toolbar .trix-button.trix-active {
  background: var(--accent-blue);
  color: white;
}

trix-toolbar .trix-button--icon {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
}

trix-toolbar .trix-button--icon::before {
  background-size: 0.75rem;
  opacity: 0.7;
}

trix-toolbar .trix-button--icon:hover::before,
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}

/* Dark mode icon adjustments */
[data-theme="dark"] trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

[data-theme="dark"] trix-toolbar .trix-button--icon.trix-active::before {
  filter: invert(0);
}

/* Trix editor content area */
trix-editor {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0.75rem;
  min-height: 150px;
  outline: none;
}

trix-editor:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

trix-editor[placeholder]:empty:not(:focus)::before {
  color: var(--text-tertiary);
}

/* Trix content styling */
.trix-content {
  color: var(--text-primary);
}

.trix-content a {
  color: var(--accent-blue);
  text-decoration: underline;
}

.trix-content ul,
.trix-content ol,
trix-editor ul,
trix-editor ol {
  padding-left: 1.5rem !important;
  margin: 0.5rem 0 !important;
}

.trix-content ul,
trix-editor ul {
  list-style-type: disc !important;
}

.trix-content ol,
trix-editor ol {
  list-style-type: decimal !important;
}

.trix-content li,
trix-editor li {
  display: list-item !important;
}

/* Nested lists */
trix-editor ul ul,
trix-editor ol ul {
  list-style-type: circle !important;
}

trix-editor ul ul ul,
trix-editor ol ul ul {
  list-style-type: square !important;
}

.trix-content blockquote,
trix-editor blockquote {
  border-left: 3px solid var(--border-secondary) !important;
  padding-left: 1rem !important;
  margin: 0.5rem 0 !important;
  color: var(--text-secondary);
}

.trix-content pre,
trix-editor pre {
  background: var(--bg-tertiary) !important;
  padding: 0.75rem !important;
  border-radius: 0.375rem;
  overflow-x: auto;
  font-family: monospace !important;
  white-space: pre-wrap !important;
}

/* Heading styles */
.trix-content h1,
trix-editor h1 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

/* Strike through */
.trix-content s,
.trix-content del,
trix-editor s,
trix-editor del {
  text-decoration: line-through !important;
}

/* Links inside editor */
trix-editor a {
  color: var(--accent-blue) !important;
  text-decoration: underline !important;
}

/* Dialog overrides for attachments, links etc */
trix-toolbar .trix-dialog {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
  margin-top: 0.25rem;
}

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

trix-toolbar .trix-dialog input[type="text"],
trix-toolbar .trix-dialog input[type="url"] {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
}

trix-toolbar .trix-dialog input:focus {
  outline: none;
  border-color: var(--accent-blue);
}

trix-toolbar .trix-button--dialog {
  background: var(--accent-blue);
  color: white;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

trix-toolbar .trix-button--dialog:hover {
  background: var(--accent-blue-hover);
}

/* Container for flex layout support */
.trix-editor-container {
  display: flex;
  flex-direction: column;
}

.trix-editor-container trix-toolbar {
  flex-shrink: 0;
}

.trix-editor-container trix-editor {
  flex: 1;
  overflow-y: auto;
}

/* Inline toolbar layout - toolbar in header row */
.trix-inline-toolbar {
  position: relative;
}

.trix-inline-toolbar .trix-header-row {
  position: relative;
  z-index: 1;
  min-height: 1.75rem;
}

.trix-inline-toolbar .trix-editor-container trix-toolbar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  z-index: 10;
}

.trix-inline-toolbar .trix-editor-container trix-editor {
  border-radius: 0.5rem;
}