/* ==========================================================================
   Trix editor styling — scoped to assessment question-row cards
   ========================================================================== */

/* Ensure the flex child hosting Trix can actually shrink below its
   content's intrinsic width. Without this, long unbreakable content
   (or the Trix toolbar) can push past the card boundary in a flex row. */
.question-row .flex-grow-1 {
  min-width: 0;
}

/* Container box for each Trix editor */
.question-row trix-editor {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 6rem;
  max-height: 16rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: 0.25rem;
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.question-row trix-editor:focus {
  outline: none;
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.question-row trix-editor[readonly] {
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: var(--bs-secondary-color, #6c757d);
  cursor: not-allowed;
}

.question-row trix-editor.is-invalid {
  border-color: var(--bs-danger, #dc3545);
}

/* Toolbar: keep it from overflowing the card, wrap buttons instead of
   forcing horizontal scroll */
.question-row trix-toolbar {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin-bottom: 0.25rem;
}

.question-row trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  width: 100%;
}

.question-row trix-toolbar .trix-button-group {
  margin-bottom: 0.25rem;
}

/* Content inside the editor: force long unbreakable strings (URLs,
   tokens) and embedded media to respect the container width */
.question-row .trix-content,
.question-row trix-editor {
  word-break: break-word;
}

.question-row .trix-content img,
.question-row trix-editor img {
  max-width: 100%;
  height: auto;
}

.question-row .trix-content pre,
.question-row trix-editor pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.question-row .trix-content table,
.question-row trix-editor table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Attachments (Trix file/image attachments) shouldn't blow out the card */
.question-row .attachment,
.question-row trix-editor .attachment {
  max-width: 100%;
}

.question-row .attachment img {
  max-width: 100%;
  height: auto;
}