/* ====== NOTES — widen content in the Record details modal ====== */

/* 0) quick visual check — remove after verifying */
.modal-dialog .notes .note { outline: 1px dashed #9ec5ff !important; }

/* 1) Replace the Bootstrap row with a 2-column grid: left meta (fixed), right content (fluid) */
.modal-dialog .notes .row {
  display: grid !important;
  grid-template-columns: 160px 1fr;   /* tweak 160 -> 140 / 200 if you want */
  gap: 12px;
  align-items: start;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* 2) Neutralize Bootstrap's fixed column sizing */
.modal-dialog .notes .col-md-3,
.modal-dialog .notes .col-md-9 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Make the text area actually use the full right column and wrap nicely */
.modal-dialog .notes .col-md-9,
.modal-dialog .notes .postcontent,
.modal-dialog .notes .msportals-notes-content,
.modal-dialog .notes .note .content {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  line-height: 1.35;
}

/* 4) File chip: allow longer filenames before ellipsis */
.modal-dialog .notes .attachmentfilename {
  max-width: 520px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 5) Optional polish for the meta stack */
.modal-dialog .notes .metadata,
.modal-dialog .notes .postdate,
.modal-dialog .notes .createdby {
  color: #6b7280;
  font-size: 0.85rem;
}


/* === RECORD DETAILS — widen Notes === */

/* make the whole note card expand across the container */
.modal-dialog .entity-notes .note {
  width: 100% !important;
  max-width: none !important;
}

/* replace the bootstrap row sizing with a two-column grid */
.modal-dialog .entity-notes .notes .row {
  display: grid !important;
  grid-template-columns: 160px 1fr;   /* meta | content. Try 140px if you want even more text space */
  gap: 12px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: start;
}

/* neutralize the fixed bootstrap columns */
.modal-dialog .entity-notes .notes .col-md-3,
.modal-dialog .entity-notes .notes .col-md-9 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ensure the actual note text can wrap freely */
.modal-dialog .entity-notes .notes .col-md-9,
.modal-dialog .entity-notes .notes .col-md-9 .text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  line-height: 1.35;
}

/* filenames: allow longer before ellipsis */
.modal-dialog .entity-notes .attachmentfilename {
  max-width: 520px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 1) Make the notes column span full width inside the modal */
.modal-dialog .entity-notes.col-lg-8 {
  flex: 0 0 100% !important;   /* bootstrap flex-basis */
  max-width: 100% !important;  /* bootstrap max-width */
}

/* 2) Let each note card use the row’s width */
.modal-dialog .entity-notes .note {
  width: 100% !important;
  max-width: none !important;
}

/* 3) (Optional) Tidy the internal layout so text gets more room */
.modal-dialog .entity-notes .notes .row {
  display: grid !important;
  grid-template-columns: 160px 1fr;  /* meta | content */
  gap: 12px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.modal-dialog .entity-notes .notes .col-md-3,
.modal-dialog .entity-notes .notes .col-md-9 {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.modal-dialog .entity-notes .notes .col-md-9,
.modal-dialog .entity-notes .notes .col-md-9 .text {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}