/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/*@import "components.css";*/

/* Custom Trix editor styles */
trix-editor {
  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
  min-height: 8em;
}

trix-toolbar {
  @apply mb-2;
}

trix-toolbar .trix-button-group {
  @apply mr-2 mb-2;
}

trix-toolbar .trix-button {
  @apply border border-gray-300 bg-white text-gray-700 rounded-md px-2 py-1 text-sm hover:bg-gray-50;
}

trix-toolbar .trix-button.trix-active {
  @apply bg-gray-100;
}

/* Apply these styles to both the main content and comments */
.trix-content,
.comment-content {
  @apply prose max-w-none;
}

/* List styles for both content and comments */
.trix-content ul,
.comment-content ul,
.trix-editor ul {
  @apply list-disc pl-5 my-4 !important;
  list-style-type: disc !important;
  margin-left: 1.5em !important;
}

.trix-content ol,
.comment-content ol,
.trix-editor ol {
  @apply list-decimal pl-5 my-4 !important;
  list-style-type: decimal !important;
  margin-left: 1.5em !important;
}

.trix-content li,
.comment-content li,
.trix-editor li {
  @apply my-1;
  display: list-item !important;
}

.trix-content blockquote,
.comment-content blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic;
}

.trix-content h1,
.comment-content h1 {
  @apply text-2xl font-bold mb-4;
}

.trix-content pre,
.comment-content pre {
  @apply bg-gray-100 p-4 rounded-md;
}

.trix-content a,
.comment-content a {
  @apply text-blue-600 hover:text-blue-800;
}

/* Hide file upload functionality since we haven't set up Active Storage yet */
.trix-button-group--file-tools {
  display: none !important;
}