/* Trix Editor Styling - Tailwind Integrated Overrides */
/* These styles enhance Trix's base styles (loaded from trix-base.css) */

/* Hide the file attachment button (attachments disabled) */
trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

/* Enhanced toolbar styling with Tailwind */
trix-toolbar {
  border: 1px solid rgb(209 213 219) !important; /* gray-300 */
  border-radius: 0.5rem 0.5rem 0 0 !important; /* rounded-t-lg */
  background: rgb(249 250 251) !important; /* gray-50 */
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Button group dividers */
trix-toolbar .trix-button-group {
  border-color: rgb(229 231 235) !important; /* gray-200 */
  margin-bottom: 0 !important;
}

/* Enhanced button hover states */
trix-toolbar .trix-button:not(:disabled):hover {
  background-color: rgb(243 244 246) !important; /* gray-100 */
}

/* Active button styling */
trix-toolbar .trix-button.trix-active {
  background-color: rgb(219 234 254) !important; /* blue-100 */
  color: rgb(29 78 216) !important; /* blue-700 */
}

/* Editor content area */
trix-editor {
  border: 1px solid rgb(209 213 219) !important; /* gray-300 */
  border-radius: 0 0 0.5rem 0.5rem !important; /* rounded-b-lg */
  padding: 1rem !important;
  min-height: 400px !important;
  background: white !important;
  font-size: 0.875rem !important; /* text-sm */
  color: rgb(17 24 39) !important; /* gray-900 */
  line-height: 1.625 !important;
  outline: none !important;
}

trix-editor:focus {
  border-color: rgb(59 130 246) !important; /* blue-500 */
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5) !important;
  outline: none !important;
}

/* Content formatting inside editor */
trix-editor h1 {
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  font-weight: 700; /* font-bold */
  color: rgb(17 24 39); /* text-gray-900 */
  margin-top: 1rem; /* mt-4 */
  margin-bottom: 0.5rem; /* mb-2 */
}

trix-editor h2 {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  font-weight: 600; /* font-semibold */
  color: rgb(17 24 39); /* text-gray-900 */
  margin-top: 0.75rem; /* mt-3 */
  margin-bottom: 0.5rem; /* mb-2 */
}

trix-editor h3 {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  font-weight: 600; /* font-semibold */
  color: rgb(31 41 55); /* text-gray-800 */
  margin-top: 0.5rem; /* mt-2 */
  margin-bottom: 0.25rem; /* mb-1 */
}

trix-editor strong {
  font-weight: 600; /* font-semibold */
  color: rgb(17 24 39); /* text-gray-900 */
}

trix-editor em {
  font-style: italic; /* italic */
  color: rgb(55 65 81); /* text-gray-700 */
}

trix-editor a {
  color: rgb(37 99 235); /* brand-600 approximation (blue-600) */
  text-decoration: underline;
}

trix-editor a:hover {
  color: rgb(29 78 216); /* brand-700 approximation (blue-700) */
}

/* Lists in editor - CRITICAL: Need explicit list-style for bullets/numbers to show */
trix-editor ul {
  list-style-type: disc !important;
  padding-left: 2.5rem !important; /* 40px */
  margin: 0.5rem 0 !important;
}

trix-editor ul li {
  display: list-item !important;
  list-style-type: disc !important;
  margin-bottom: 0.25rem !important;
  color: rgb(55 65 81); /* gray-700 */
}

trix-editor ol {
  list-style-type: decimal !important;
  padding-left: 2.5rem !important; /* 40px */
  margin: 0.5rem 0 !important;
}

trix-editor ol li {
  display: list-item !important;
  list-style-type: decimal !important;
  margin-bottom: 0.25rem !important;
  color: rgb(55 65 81); /* gray-700 */
}

/* Nested lists */
trix-editor ul ul {
  list-style-type: circle !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

trix-editor ol ol {
  list-style-type: lower-alpha !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

trix-editor ul ol {
  list-style-type: lower-alpha !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

trix-editor ol ul {
  list-style-type: circle !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

trix-editor blockquote {
  border-left: 4px solid rgb(209 213 219); /* border-gray-300 */
  padding-left: 1rem; /* pl-4 */
  font-style: italic;
  color: rgb(75 85 99); /* text-gray-600 */
  margin-top: 0.5rem; /* my-2 */
  margin-bottom: 0.5rem;
}

trix-editor pre {
  background-color: rgb(243 244 246); /* bg-gray-100 */
  border-radius: 0.25rem; /* rounded */
  padding: 0.75rem; /* p-3 */
  font-size: 0.875rem; /* text-sm */
  font-family: monospace; /* font-mono */
  overflow-x: auto;
  margin-top: 0.5rem; /* my-2 */
  margin-bottom: 0.5rem;
}

trix-editor code {
  background-color: rgb(243 244 246); /* bg-gray-100 */
  border-radius: 0.25rem; /* rounded */
  padding-left: 0.25rem; /* px-1 */
  padding-right: 0.25rem;
  padding-top: 0.125rem; /* py-0.5 */
  padding-bottom: 0.125rem;
  font-size: 0.875rem; /* text-sm */
  font-family: monospace; /* font-mono */
}

/* Display mode styling (matches editor appearance) */
.trix-content {
  font-size: 0.875rem; /* text-sm */
  color: rgb(17 24 39); /* gray-900 */
  line-height: 1.625; /* leading-relaxed */
}

.trix-content h1 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700; /* font-bold */
  color: rgb(17 24 39); /* gray-900 */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.trix-content h2 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: rgb(17 24 39); /* gray-900 */
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

.trix-content h3 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: rgb(31 41 55); /* gray-800 */
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.trix-content strong {
  font-weight: 600; /* font-semibold */
  color: rgb(17 24 39); /* gray-900 */
}

.trix-content em {
  font-style: italic;
  color: rgb(55 65 81); /* gray-700 */
}

.trix-content a {
  color: rgb(37 99 235); /* blue-600 as fallback for brand-600 */
  text-decoration: underline;
}

.trix-content a:hover {
  color: rgb(29 78 216); /* blue-700 as fallback for brand-700 */
}

/* Lists in display mode - Match editor styling */
.trix-content ul {
  list-style-type: disc !important;
  padding-left: 2.5rem !important; /* 40px */
  margin: 0.5rem 0 !important;
}

.trix-content ul li {
  display: list-item !important;
  list-style-type: disc !important;
  margin-bottom: 0.25rem !important;
  color: rgb(55 65 81); /* gray-700 */
}

.trix-content ol {
  list-style-type: decimal !important;
  padding-left: 2.5rem !important; /* 40px */
  margin: 0.5rem 0 !important;
}

.trix-content ol li {
  display: list-item !important;
  list-style-type: decimal !important;
  margin-bottom: 0.25rem !important;
  color: rgb(55 65 81); /* gray-700 */
}

/* Nested lists in display mode */
.trix-content ul ul {
  list-style-type: circle !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

.trix-content ol ol {
  list-style-type: lower-alpha !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

.trix-content ul ol {
  list-style-type: lower-alpha !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

.trix-content ol ul {
  list-style-type: circle !important;
  padding-left: 1.5rem !important;
  margin-top: 0.25rem !important;
}

.trix-content blockquote {
  border-left: 4px solid rgb(209 213 219); /* gray-300 */
  padding-left: 1rem;
  font-style: italic;
  color: rgb(75 85 99); /* gray-600 */
  margin: 0.5rem 0;
}

.trix-content pre {
  background-color: rgb(243 244 246); /* gray-100 */
  border-radius: 0.25rem;
  padding: 0.75rem;
  font-size: 0.875rem; /* text-sm */
  font-family: monospace;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.trix-content code {
  background-color: rgb(243 244 246); /* gray-100 */
  border-radius: 0.25rem;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem; /* text-sm */
  font-family: monospace;
}

.trix-content p {
  margin-bottom: 0.5rem;
}

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

/* Dialog styling (for link insertion) */
trix-toolbar .trix-dialog {
  @apply bg-white border border-gray-300 rounded-lg shadow-lg p-4;
}

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

trix-toolbar .trix-dialog input[type="text"] {
  @apply border border-gray-300 rounded px-3 py-2 text-sm focus:ring-2 focus:ring-brand-500 focus:border-brand-500;
}

trix-toolbar .trix-dialog input[type="button"] {
  @apply px-4 py-2 text-sm font-medium text-white bg-brand-500 rounded hover:bg-brand-600 transition-colors;
}