/*
 * 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.
 */

.ql-editor {
  margin-top: 0 !important;
  padding-left: 5px;
  padding-top: 5px;
}

.board-comment-editor .ql-toolbar.ql-snow {
  border: 1px solid rgb(209 250 229);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.96) 100%);
  padding: 0.875rem 1rem;
}

.board-comment-editor .ql-container.ql-snow {
  border: 1px solid rgb(167 243 208);
  border-radius: 0 0 1rem 1rem;
  background: rgba(255, 255, 255, 0.92);
}

.board-comment-editor .ql-editor {
  min-height: 180px;
  padding: 1rem 1rem 1.125rem;
  color: rgb(15 23 42);
  font-size: 0.95rem;
  line-height: 1.7;
}

.board-comment-editor .ql-editor.ql-blank::before {
  left: 1rem;
  right: 1rem;
  color: rgb(100 116 139);
  font-style: normal;
}

.board-comment-editor .ql-toolbar .ql-picker-label,
.board-comment-editor .ql-toolbar button {
  transition: color 120ms ease, background-color 120ms ease;
}

.board-comment-editor .ql-toolbar button:hover,
.board-comment-editor .ql-toolbar .ql-picker-label:hover {
  color: rgb(15 118 110);
}

.board-comment-body {
  line-height: 1.7;
}

.board-comment-body p,
.board-comment-body ul,
.board-comment-body ol,
.board-comment-body blockquote,
.board-comment-body pre {
  margin: 0.75rem 0;
}

.board-comment-body ul,
.board-comment-body ol {
  padding-left: 1.25rem;
}

.board-comment-body blockquote {
  border-left: 3px solid rgb(94 234 212);
  padding-left: 0.875rem;
  color: rgb(51 65 85);
}

.board-comment-body a {
  color: rgb(15 118 110);
  text-decoration: underline;
}

trix-editor {
  border-radius: 1rem;
  border-color: rgb(226 232 240);
  min-height: 140px;
  background: white;
}

.trix-content {
  line-height: 1.65;
}