/* Dark theme styles for ActionText/Trix Editor */

/* Trix Editor Container */
trix-editor {
  @apply bg-gray-800 text-gray-100 border border-gray-600 rounded-md;
  min-height: 200px;
  padding: 12px;
}

trix-editor:focus {
  @apply ring-2 ring-indigo-500 border-indigo-500 outline-none;
}

/* Trix Toolbar */
trix-toolbar {
  @apply bg-gray-900 border border-gray-700 rounded-t-md mb-0;
  padding: 8px;
}

trix-toolbar .trix-button-row {
  @apply flex flex-wrap gap-1;
}

/* Trix Buttons */
trix-toolbar .trix-button {
  @apply bg-gray-800 text-gray-300 border border-gray-700 rounded hover:bg-gray-700 hover:text-white transition-colors cursor-pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 6px;
  font-size: 0;
  margin: 0;
  text-indent: -9999px;
  overflow: visible;
}

trix-toolbar .trix-button:not(:disabled):hover {
  @apply bg-gray-700 text-white border-gray-600 cursor-pointer;
}

trix-toolbar .trix-button.trix-active {
  @apply bg-indigo-600 text-white border-indigo-600;
}

trix-toolbar .trix-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Hide button text, show icons */
trix-toolbar .trix-button::before {
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
}

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 4v16h6.5c2.5 0 4.5-2 4.5-4.5S16 11 13.5 11H11V7h2.5C15 7 16 6 16 4.5S15 2 13.5 2H7zm2 2h4.5c.3 0 .5.2.5.5s-.2.5-.5.5H9V6zm0 7h4.5c1.4 0 2.5 1.1 2.5 2.5S14.9 18 13.5 18H9v-5z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h4l-3 12h3l-.5 2H9l.5-2h3l3-12H12l.5-2z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C9.24 2 7 4.24 7 7c0 1.06.33 2.04.89 2.85L5 12.74V14h7v2c0 1.1.9 2 2 2s2-.9 2-2v-2h3v-1.26l-2.89-2.89C16.67 9.04 17 8.06 17 7c0-2.76-2.24-5-5-5zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-size='16' font-weight='bold'%3EH1%3C/text%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h14v2H7zm0 8h14v-2H7zm0 6h14v-2H7zM4 5.5A1.5 1.5 0 112.5 4 1.5 1.5 0 014 5.5zm0 6A1.5 1.5 0 112.5 10 1.5 1.5 0 014 11.5zm0 6A1.5 1.5 0 112.5 16 1.5 1.5 0 014 17.5z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 13h14v-2H7v2zm0 6h14v-2H7v2zM7 7h14V5H7v2zm-4 6h2V7H3v6zm0 2v4h2v-1H4v-1h1v-1H3v-1h2v-1H3v1z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M11 17l-5-5 5-5v10z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M13 7l5 5-5 5V7z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3E%3C/svg%3E");
}

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3E%3C/svg%3E");
}

/* Hide all text inside buttons */
trix-toolbar .trix-button-group button::after {
  content: '';
}

trix-toolbar .trix-button span,
/* Hide button text in toolbar (icon-only buttons) but NOT in dialogs */
trix-toolbar .trix-button-row .trix-button .trix-button__text {
  display: none !important;
  visibility: hidden;
  font-size: 0;
  width: 0;
  height: 0;
}

/* Show button text in dialogs */
trix-toolbar .trix-dialog .trix-button .trix-button__text,
trix-toolbar .trix-dialog button .trix-button__text {
  display: inline !important;
  visibility: visible !important;
  font-size: 0.875rem !important;
  width: auto !important;
  height: auto !important;
  color: white !important;
}

/* Button Groups */
trix-toolbar .trix-button-group {
  @apply inline-flex items-center border border-gray-700 rounded-md overflow-hidden;
  margin-right: 8px;
}

trix-toolbar .trix-button-group .trix-button {
  @apply border-0 rounded-none;
}

trix-toolbar .trix-button-group .trix-button:not(:last-child) {
  @apply border-r border-gray-700;
}

/* Dialog */
trix-toolbar .trix-dialog {
  @apply bg-gray-800 border border-gray-700 rounded-md shadow-lg;
  padding: 10px;
}

trix-toolbar .trix-dialog__link-fields {
  @apply flex gap-2;
}

trix-toolbar .trix-dialog input[type="url"] {
  @apply bg-gray-900 text-gray-100 border border-gray-700 rounded px-3 py-1 flex-1;
}

trix-toolbar .trix-dialog input[type="url"]:focus {
  @apply outline-none ring-2 ring-indigo-500 border-indigo-500;
}

trix-toolbar .trix-dialog button {
  @apply bg-indigo-600 text-white px-3 py-1 rounded hover:bg-indigo-700;
}

/* Content styles */
trix-editor a {
  @apply text-indigo-400 underline;
}

trix-editor pre {
  @apply bg-gray-900 text-gray-100 rounded p-3 overflow-x-auto;
}

trix-editor blockquote {
  @apply border-l-4 border-gray-600 pl-4 text-gray-300;
}

trix-editor h1 {
  @apply text-2xl font-bold text-white mb-2;
}

trix-editor ul,
trix-editor ol {
  @apply ml-6 mb-4;
}

trix-editor li {
  @apply mb-1;
}

/* Placeholder text */
trix-editor:empty:not(:focus)::before {
  @apply text-gray-500;
}

/* ActionText content display in dark mode */
.dark .trix-content {
  @apply text-gray-300;
}

.dark .trix-content h1,
.dark .trix-content h2,
.dark .trix-content h3,
.dark .trix-content h4,
.dark .trix-content h5,
.dark .trix-content h6 {
  @apply text-gray-100;
}

.dark .trix-content p,
.dark .trix-content div,
.dark .trix-content span {
  @apply text-gray-300;
}

.dark .trix-content strong {
  @apply text-gray-200;
}

.dark .trix-content a {
  @apply text-indigo-400;
}

.dark .trix-content blockquote {
  @apply border-gray-600 text-gray-400;
}

.dark .trix-content pre {
  @apply bg-gray-900 text-gray-100;
}

.dark .trix-content ul li,
.dark .trix-content ol li {
  @apply text-gray-300;
}