/**
 * InsidePiano — Private Messaging: Inbox, Message View, Compose,
 * Reply, Select2 Dark Theme for PMS, Kebab Menu
 */

/* ============================================================
   PMS — Single Message View (.pmMessage)
   ============================================================ */

/* ============================================================
   PMS — Message Detail View (.pmMessage)
   Layout: email-detail card with dashed separators
   ============================================================ */

/* Outer card wrapper */
.cbPMS .pmMessage {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Header: avatar + sender + date + kebab ──
   Must beat CB's .cb_template .media { align-items: flex-start } */
.cb_template .cbPMS .pmMessageHeader,
.cbPMS .pmMessageHeader.media {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* Kill Bootstrap .row flex-wrap */
.cbPMS .pmMessageHeader.row {
  flex-wrap: nowrap !important;
}

/* Strip Bootstrap .border utility */
.cbPMS .pmMessageHeader.border {
  border-color: transparent !important;
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
}

/* Kill Bootstrap .mb-2 on header */
.cbPMS .pmMessageHeader.mb-2 {
  margin-bottom: 0 !important;
}

/* Avatar container — must be inline flex, not block
   Must beat CB's .cb_template .p-2 from bootstrap.min.css */
.cb_template .cbPMS .pmMessageHeaderImg,
.cbPMS .pmMessageHeaderImg.p-2 {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
}

/* Details — strip Bootstrap p-2 padding + force center alignment
   .media-body defaults to flex-start in CB's bootstrap
   .cb_template .no-gutters adds margin-bottom: 45px from template.css */
.cb_template .cbPMS .pmMessageHeaderDetails,
.cb_template .cbPMS .no-gutters.pmMessageHeaderDetails,
.cbPMS .pmMessageHeaderDetails.p-2 {
  padding: 0 !important;
  align-self: center !important;
  margin: 0 !important;
}

.cbPMS .pmMessageHeaderImg .cbImgAvatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2px solid #2e2e33 !important;
  object-fit: cover !important;
}

/* Details area: takes remaining space */
.cbPMS .pmMessageHeaderDetails {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* Inner .col: name + date on same row */
.cbPMS .pmMessageHeaderDetails > .col {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 !important;
  width: auto !important;
}

.cbPMS .pmMessageHeaderUser {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.cbPMS .pmMessageHeaderUser a {
  color: inherit !important;
  text-decoration: none !important;
}

.cbPMS .pmMessageHeaderUser a:hover {
  color: #7367f0 !important;
}

/* Envelope icon — use purple */
.cbPMS .pmMessageHeaderUser .fa-envelope {
  color: #7367f0 !important;
  font-size: 0.8rem !important;
}

/* Online/offline indicator */
.cbPMS .pmMessageHeaderUser .text-small {
  display: none !important;
}

/* Date — move to right side of header */
.cbPMS .pmMessageHeaderDate {
  font-size: 0.8rem !important;
  color: #939397 !important;
  white-space: nowrap !important;
}

/* Kebab menu: right column */
.cbPMS .pmMessageHeaderMenu {
  flex: 0 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.cbPMS .pmMessageMenu {
  color: #57575a !important;
  font-size: 1.1rem !important;
  transition: color 0.15s !important;
}

.cbPMS .pmMessageMenu:hover {
  color: #7367f0 !important;
}

/* ── Message body ── */
.cbPMS .pmMessageContent {
  font-size: 0.9rem !important;
  color: #c8c8cd !important;
  line-height: 1.75 !important;
  padding: 1.25rem 1.5rem !important;
}

.cbPMS .pmMessageContent p {
  margin-bottom: 0.75rem !important;
}

.cbPMS .pmMessageContent p:last-child {
  margin-bottom: 0 !important;
}

/* ── Blockquote / quoted reply ── */
.cbPMS .pmMessageReply {
  background: rgba(115,103,240,0.04) !important;
  border-left: 3px solid rgba(115,103,240,0.4) !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 1rem 1.25rem !important;
  margin: 0.75rem 0 !important;
  font-size: 0.85rem !important;
  color: #b0b0b5 !important;
  line-height: 1.7 !important;
}

.cbPMS .pmMessageReply p {
  margin-bottom: 0.6rem !important;
}

.cbPMS .pmMessageReply p:last-child {
  margin-bottom: 0 !important;
}

/* Blockquote footer (— sender name) */
.cbPMS .pmMessageReply .blockquote-footer {
  font-size: 0.8rem !important;
  color: #7367f0 !important;
  margin-top: 0.75rem !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(228,230,252,0.06) !important;
}

.cbPMS .pmMessageReply .blockquote-footer a {
  color: #7367f0 !important;
  text-decoration: none !important;
}

.cbPMS .pmMessageReply .blockquote-footer a:hover {
  color: #9f92fe !important;
}

/* ── Bottom action bar ── */
.cbPMS .pmMessage > .mt-3.text-right {
  margin: 0 !important;
  padding: 0.875rem 1.5rem !important;
  border-top: 1px dashed rgba(228,230,252,0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
}

/* Back button — ghost purple to match site-wide pattern
   Must beat CB's .cb_template .btn (template.css loads after custom.css) */
.cb_template .cbPMS .pmButtonBack,
.cbPMS button.pmButtonBack.btn-secondary {
  background-color: rgba(115,103,240,0.15) !important;
  background: rgba(115,103,240,0.15) !important;
  color: #7367f0 !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 0.375rem !important;
  padding: 0.45rem 1.1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  box-shadow: none !important;
  --bs-btn-bg: rgba(115,103,240,0.15) !important;
  --bs-btn-color: #7367f0 !important;
  --bs-btn-border-color: rgba(115,103,240,0.55) !important;
}

.cb_template .cbPMS .pmButtonBack:hover,
.cbPMS button.pmButtonBack.btn-secondary:hover {
  background-color: rgba(115,103,240,0.28) !important;
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
  --bs-btn-hover-bg: rgba(115,103,240,0.28) !important;
  --bs-btn-hover-color: #9f92fe !important;
  --bs-btn-hover-border-color: rgba(115,103,240,0.7) !important;
}

/* ============================================================
   PMS — New Message Form (.pmMessageEdit)
   ============================================================ */

/* Title row */
.cbPMS .pmMessageEditTitle {
  border-bottom-color: #2e2e33 !important;
  margin-bottom: 0 !important;
  padding: 1rem 0 0.75rem !important;
  display: flex !important;
  align-items: center !important;
}

.cbPMS .pmMessageEditTitle.border-bottom {
  border-bottom-color: #2e2e33 !important;
}

.cbPMS .pmMessageEditTitle.mb-3 {
  margin-bottom: 0 !important;
}

.cbPMS .pmMessageEditTitle .cb-page-header-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  margin: 0 !important;
}

/* Form row no-gutters — override the 45px CB rule */
.cb_template .cbPMS .pmMessageEditForm .no-gutters {
  margin-bottom: 0.75rem !important;
}

/* Form labels */
.cbPMS .pmMessageEditForm .col-form-label {
  color: #939397 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding-top: 0.5rem !important;
}

/* Recipient text input */
.cbPMS #to.form-control {
  background: #161618 !important;
  border: 1px solid #2e2e33 !important;
  color: #c8c8cd !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 0.85rem !important;
}

.cbPMS #to.form-control:focus {
  border-color: rgba(115,103,240,0.55) !important;
  box-shadow: none !important;
  outline: none !important;
}

.cbPMS #to.form-control::placeholder {
  color: #57575a !important;
}

/* Connection select (native <select> styled as btn-light) — dark it */
.cbPMS #connection {
  background: #2a2a2e !important;
  color: #939397 !important;
  border: 1px solid #2e2e33 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.6rem !important;
  cursor: pointer !important;
  appearance: auto !important;
}

.cbPMS #connection:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(115,103,240,0.55) !important;
}

/* Hide System Message field (admin-only, not relevant for members) */
.cbPMS .cbft_yesno.cb_form_line {
  display: none !important;
}

/* TinyMCE outer wrapper */
.cbPMS .cbTooltip.d-block.clearfix {
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Hide the Joomla shortcodes/extra toolbar buttons below TinyMCE */
.cbPMS #editor-xtd-buttons,
.cbPMS .toggle-editor.btn-toolbar {
  display: none !important;
}

/* Submit button — ghost purple */
.cbPMS .pmButtonSubmit {
  background: rgba(115,103,240,0.15) !important;
  color: #7367f0 !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 8px !important;
  padding: 0.45rem 1.2rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
}

.cbPMS .pmButtonSubmit:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}

/* Cancel button — ghost neutral */
.cbPMS .pmButtonCancel {
  background: transparent !important;
  color: #939397 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  padding: 0.45rem 1rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  margin-left: 0.5rem !important;
  cursor: pointer !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.cbPMS .pmButtonCancel:hover {
  color: #c8c8cd !important;
  border-color: #57575a !important;
}

/* ============================================================
   PMS MyPmsPro — Full Suite Styling
   Covers: inbox list, message view, new message form
   ============================================================ */

/* Strip Conca double-wrapper — PMS provides its own structure */
.demo-card:has(.cbPMS),
.demo-card:has(.cbPMS) .demo-card-body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Outer inbox card ── */
.cbPMS .pmMessages {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* ── Header: title ── */
.cbPMS .pmMessagesTitle {
  background: #1F1F21 !important;
  border-bottom: 1px solid #2e2e33 !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Override Bootstrap's .border-bottom utility which adds rgb(222,226,230) */
.cbPMS .pmMessagesTitle.border-bottom,
.cbPMS .cb-page-header.border-bottom {
  border-bottom-color: #2e2e33 !important;
}

/* Kill mb-3 from Bootstrap that creates gap below the border */
.cbPMS .pmMessagesTitle.mb-3 {
  margin-bottom: 0 !important;
}

.cbPMS .pmMessagesTitle .cb-page-header-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Toolbar: New Message button + search ── */
.cbPMS .pmMessagesHeader {
  background: #1F1F21 !important;
  border-bottom: 1px solid #2e2e33 !important;
  padding: 0.75rem 1.75rem 0.75rem 1.5rem !important;
  align-items: center !important;
}

/* Override .cb_template .no-gutters which sets margin-bottom: 45px !important */
.cb_template .cbPMS .pmMessagesHeader.no-gutters {
  margin: 0 !important;
}

/* New Message button — ghost purple */
.cbPMS .pmButton.pmButtonNew {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: rgba(115,103,240,0.15) !important;
  color: #7367f0 !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
}

.cbPMS .pmButton.pmButtonNew:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}

.cbPMS .pmButton.pmButtonNew .fa.fa-plus-circle::before {
  font-family: 'bootstrap-icons' !important;
  content: '\f64d' !important; /* bi-plus-circle */
  font-style: normal !important;
  font-size: 0.95rem !important;
}

/* Mark All Read — match height/size of New Message button exactly */
.cbPMS .pmButton.pmButtonRead {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #939397 !important;
  text-decoration: none !important;
  margin-left: 0.5rem !important;
  padding: 0.4rem 0.9rem !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  line-height: 1.5 !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  vertical-align: middle !important;
}

.cbPMS .pmButton.pmButtonRead:hover {
  color: #c8c8cd !important;
  border-color: #57575a !important;
}

/* Ensure toolbar cols use flex so everything aligns vertically */
.cbPMS .pmMessagesHeader .col-sm,
.cbPMS .pmMessagesHeader .col-sm-6 {
  display: flex !important;
  align-items: center !important;
}

.cbPMS .pmMessagesHeader .col-sm-6 {
  justify-content: flex-end !important;
}

/* ── Select2 folder dropdown (main page only) ── */
/* The .select2-container--bootstrap rendered widget */
.cbPMS .pmMessagesForm .select2-container--bootstrap .select2-selection--single {
  background: #1F1F21 !important;
  border: none !important;
  color: #c8c8cd !important;
  height: 35px !important;
  border-radius: 8px 0 0 8px !important;
  padding: 0.4rem 2rem 0.4rem 0.75rem !important;
  line-height: 1.5 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.cbPMS .pmMessagesForm .select2-container--bootstrap .select2-selection__rendered {
  color: #c8c8cd !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.cbPMS .pmMessagesForm .select2-container--bootstrap .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* CSS chevron-down arrow */
.cbPMS .pmMessagesForm .select2-container--bootstrap .select2-selection__arrow b {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: #939397 transparent transparent transparent !important;
}

.cbPMS .pmMessagesForm .select2-container--bootstrap.select2-container--open .select2-selection__arrow b {
  border-width: 0 4px 5px 4px !important;
  border-color: transparent transparent #939397 transparent !important;
}

/* Select2 dropdown panel (appended to body) */
.select2-container--bootstrap .select2-dropdown {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}

.select2-container--bootstrap .select2-results__option {
  color: #c8c8cd !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.85rem !important;
}

.select2-container--bootstrap .select2-results__option--highlighted {
  background: rgba(115,103,240,0.2) !important;
  color: #9f92fe !important;
}

.select2-container--bootstrap .select2-results__option[aria-selected="true"] {
  background: rgba(115,103,240,0.1) !important;
  color: #7367f0 !important;
}

/* Outer container — same height as other inputs */
.cbPMS .pmMessagesForm .select2-container.form-control {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 115px !important;
}

/* ── Responsive toolbar ── */
@media (max-width: 575px) {
  /* Stack into two rows: [buttons row] then [search row] */
  .cbPMS .pmMessagesHeader {
    flex-wrap: wrap !important;
    row-gap: 0.5rem !important;
    padding: 0.6rem 1rem !important;
  }

  /* Row 1: both buttons side by side, auto width */
  .cbPMS .pmMessagesHeader .col-sm {
    flex: 0 0 auto !important;
    width: auto !important;
    text-align: left !important;
  }

  /* Row 2: search takes full width, left-aligned */
  .cbPMS .pmMessagesHeader .col-sm-6 {
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  .cbPMS .pmMessagesHeader .col-sm-6 .input-group {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Prevent New Message from stretching full width */
  .cbPMS .pmButton.pmButtonNew {
    width: auto !important;
    display: inline-flex !important;
  }
}

/* Remove default browser margin on <button> that offsets it from the <a> */
.cbPMS .pmButton.pmButtonNew {
  margin: 0 !important;
}

/* Search + folder dropdown: fill the right column */
.cbPMS .pmMessagesForm .input-group {
  max-width: 100% !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.cbPMS .pmMessagesForm .input-group-prepend .input-group-text {
  background: #1F1F21 !important;
  border: none !important;
  color: #939397 !important;
  border-radius: 0 !important;
  padding-right: 0.4rem !important;
}

.cbPMS .pmMessagesForm .pmSearch {
  background: #1F1F21 !important;
  border: none !important;
  color: #c8c8cd !important;
  border-radius: 0 !important;
  font-size: 0.85rem !important;
  flex: 1 1 auto !important;
  min-width: 80px !important;
  padding-right: 0.75rem !important;
}

.cbPMS .pmMessagesForm .pmSearch::placeholder {
  color: #57575a !important;
}

.cbPMS .pmMessagesForm .pmSearch:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(115,103,240,0.55) !important;
}

/* ── Message list rows ── */
.cbPMS .pmMessagesRows {
  padding: 0 !important;
}

.cbPMS .pmMessagesRows hr {
  margin: 0 !important;
  border-color: #2e2e33 !important;
  opacity: 1 !important;
}

.cbPMS .pmMessagesRow {
  display: flex !important;
  align-items: flex-start !important;
  padding: 0.85rem 1.5rem !important;
  gap: 0.875rem !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
}

.cbPMS .pmMessagesRow:hover {
  background: rgba(115,103,240,0.07) !important;
}

/* Unread row — left accent bar */
.cbPMS .pmMessagesRowUnread {
  background: rgba(115,103,240,0.04) !important;
}

.cbPMS .pmMessagesRowUnread::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #7367f0 !important;
  border-radius: 0 2px 2px 0 !important;
}

/* Avatar */
.cbPMS .pmMessagesRowImg {
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.cbPMS .pmMessagesRowImg .cbImgAvatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #2e2e33 !important;
  background: #2a2a2e !important;
  display: block !important;
}

/* Message body container */
.cbPMS .pmMessagesRowMsg {
  flex: 1 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
}

/* Row 1: sender name + date */
.cbPMS .pmMessagesRowMsg > .row:first-child {
  display: flex !important;
  align-items: baseline !important;
  margin-bottom: 0.15rem !important;
}

/* Tighten the default Bootstrap .row gutters inside message rows */
.cbPMS .pmMessagesRowMsg .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove extra bottom margin PMS/Bootstrap adds to inner rows */
.cbPMS .pmMessagesRowMsg > .row:last-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.cbPMS .pmMessagesRowMsg > .row {
  margin-bottom: 0 !important;
}

/* Sender name */
.cbPMS .pmMessagesRowMsgUser {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cbPMS .pmMessagesRowMsgUser a {
  color: inherit !important;
  text-decoration: none !important;
}

.cbPMS .pmMessagesRowUnread .pmMessagesRowMsgUser {
  color: #e0e0e5 !important;
  font-weight: 700 !important;
}

/* Envelope + online icons inside name */
.cbPMS .pmMessagesRowMsgUser .fa,
.cbPMS .pmMessagesRowMsgUser [class*="fa-"] {
  font-size: 0.75rem !important;
  margin-right: 4px !important;
  color: #7367f0 !important;
  opacity: 0.8 !important;
}

/* Online indicator circle (red/green circle) */
.cbPMS .pmMessagesRowMsgUser span[style] {
  margin-left: 4px !important;
}

/* Date — in .pmMessagesRowMsgMenu on desktop */
.cbPMS .pmMessagesRowMsgMenu {
  font-size: 0.78rem !important;
  color: #939397 !important;
  white-space: nowrap !important;
  padding-left: 0.5rem !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* Message preview */
.cbPMS .pmMessagesRowMsgIntro {
  font-size: 0.83rem !important;
  color: #939397 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.4 !important;
}

.cbPMS .pmMessagesRowUnread .pmMessagesRowMsgIntro {
  color: #b0b0b5 !important;
}

/* Mobile-only date (hidden on desktop by PMS) */
.cbPMS .pmMessagesRowDate {
  font-size: 0.75rem !important;
  color: #939397 !important;
}

/* ============================================================
   PMS — New Message Compose Form (.pmMessageEditDefault)
   Design: email-client compose window — card with header,
   dashed-border rows for To / Message, bottom Send bar.
   ============================================================ */

/* Card wrapper — the outer .pmMessageEditDefault becomes the card */
.cbPMS .pmMessageEdit.pmMessageEditDefault {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* The form itself — no padding (rows handle spacing) */
.cbPMS .pmMessageEditForm {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Card header: "New Message" / "Compose Message" title ── */
.cbPMS .pmMessageEditTitle {
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  border-bottom: 1px solid #2e2e33 !important;
}
.cbPMS .pmMessageEditTitle.mb-3 {
  margin-bottom: 0 !important;
}
.cbPMS .pmMessageEditTitle.border-bottom {
  border-bottom-color: #2e2e33 !important;
}
.cbPMS .pmMessageEditTitle .cb-page-header-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── "To:" row ── */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  border-bottom: 1px dashed rgba(46,46,51,0.9) !important;
  /* Kill CB's no-gutters margin */
  --bs-gutter-x: 0 !important;
}

/* "A" / "To:" label */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .col-form-label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 2.5rem !important;
  padding: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #939397 !important;
}

/* Field area */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .cb_field {
  flex: 1 !important;
  width: auto !important;
  padding: 0 !important;
}

/* Input group (text input + select2 picker) */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Override PMS d-inline-flex + w-auto */
  flex-wrap: nowrap !important;
}

/* "To" text input */
.cbPMS .pmMessageEditForm #to.form-control {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #c8c8cd !important;
  font-size: 0.9rem !important;
  padding: 0.25rem 0.5rem !important;
  height: auto !important;
  outline: none !important;
}
.cbPMS .pmMessageEditForm #to.form-control:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.cbPMS .pmMessageEditForm #to.form-control::placeholder {
  color: #57575a !important;
}

/* Connection picker (select2) — icon button on right */
.cbPMS .pmMessageEditForm .input-group-append {
  flex-shrink: 0 !important;
}
.cbPMS .pmMessageEditForm #connection.select2-hidden-accessible {
  /* the raw select is hidden by select2 */
}
/* Select2 rendered widget */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn {
  width: auto !important;
  min-width: 2.5rem !important;
}
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn .select2-selection--single {
  background: rgba(115,103,240,0.1) !important;
  border: 1px solid rgba(115,103,240,0.3) !important;
  border-radius: 8px !important;
  height: 32px !important;
  width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn .select2-selection__rendered {
  display: none !important; /* hide text, keep icon via the fa class */
}
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn .select2-selection__arrow {
  display: none !important;
}
/* The fa-users icon is a class on the select2 container itself */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn.fa.fa-users::before {
  color: #ff9f43 !important;
  font-size: 0.9rem !important;
}

/* Override the Bootstrap btn classes CB applies to the select2 container */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn.btn {
  padding: 0 !important;
  width: 36px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background-color: rgba(115,103,240,0.1) !important;
  background-image: none !important;
  border: 1px solid rgba(115,103,240,0.3) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
  /* Kill Bootstrap btn-light CSS vars */
  --bs-btn-bg: rgba(115,103,240,0.1) !important;
  --bs-btn-hover-bg: rgba(115,103,240,0.2) !important;
  --bs-btn-border-color: rgba(115,103,240,0.3) !important;
  --bs-btn-color: #7367f0 !important;
}
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn.btn:hover {
  background-color: rgba(115,103,240,0.2) !important;
  border-color: rgba(115,103,240,0.55) !important;
}

/* ── "Mensaje" / Message row ── */
.cbPMS .pmMessageEditForm .cbft_textarea.cb_form_line {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Hide the "Mensaje" label — editor is self-explanatory in compose window */
.cbPMS .pmMessageEditForm .cbft_textarea.cb_form_line > .col-form-label {
  display: none !important;
}

/* Field takes full width */
.cbPMS .pmMessageEditForm .cbft_textarea.cb_form_line .cb_field {
  width: 100% !important;
  padding: 0 !important;
}

/* TinyMCE wrapper */
.cbPMS .pmMessageEditForm .cbft_textarea .cbTooltip.d-block {
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* TinyMCE chrome inside compose window */
.cbPMS .pmMessageEditForm .tox-tinymce {
  border: none !important;
  border-radius: 0 !important;
  border-top: 1px solid #2e2e33 !important;
  min-height: 250px !important;
}

/* Extra shortcodes/toolbar below TinyMCE — hide */
.cbPMS #editor-xtd-buttons,
.cbPMS .toggle-editor.btn-toolbar,
.cbPMS .js-tiny-toggler-button,
.cbPMS .pmMessageEditForm a[href="#"],
.cbPMS .pmMessageEditForm .cbft_textarea + a {
  display: none !important;
}

/* Hide stray info icon / tooltip link below TinyMCE statusbar */
.cbPMS .pmMessageEditForm .cbft_textarea .cbTooltip ~ a,
.cbPMS .pmMessageEditForm .cbft_textarea > .cb_field > a,
.cbPMS .pmMessageEditForm .cbTooltip.d-block + a,
.cbPMS .pmMessageEditForm .cbft_textarea a[href="#"] {
  display: none !important;
}

/* System Message field — hidden */
.cbPMS .pmMessageEditForm .cbft_yesno.cb_form_line {
  display: none !important;
}

/* ── Bottom bar: Send + Cancel buttons ── */
.cbPMS .pmMessageEditForm > .row.no-gutters:last-of-type,
.cbPMS .pmMessageEditForm > .row:not(.cb_form_line) {
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  border-top: 1px solid #2e2e33 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Offset column — remove Bootstrap offset, full width */
.cbPMS .pmMessageEditForm .offset-sm-3.col-sm-9 {
  margin-left: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0 !important;
}

/* ── Submit button (Enviar mensaje) — ghost purple ── */
/* Must beat Bootstrap .btn-primary which sets --bs-btn-bg */
.cbPMS .pmMessageEditForm input.pmButtonSubmit,
.cbPMS .pmMessageEditForm input.btn.btn-primary.pmButtonSubmit,
.cbPMS .pmMessageEditForm .pmButton.pmButtonSubmit {
  background-color: rgba(115,103,240,0.15) !important;
  background-image: none !important;
  color: #7367f0 !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 8px !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s !important;
  /* Kill Bootstrap 5 CSS var system */
  --bs-btn-bg: rgba(115,103,240,0.15) !important;
  --bs-btn-color: #7367f0 !important;
  --bs-btn-border-color: rgba(115,103,240,0.55) !important;
  --bs-btn-hover-color: #9f92fe !important;
  --bs-btn-hover-bg: rgba(115,103,240,0.28) !important;
  --bs-btn-hover-border-color: rgba(115,103,240,0.7) !important;
  --bs-btn-active-color: #9f92fe !important;
  --bs-btn-active-bg: rgba(115,103,240,0.28) !important;
}
.cbPMS .pmMessageEditForm input.pmButtonSubmit:hover,
.cbPMS .pmMessageEditForm .pmButton.pmButtonSubmit:hover {
  background-color: rgba(115,103,240,0.28) !important;
  background-image: none !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}

/* ── Cancel button ── */
.cbPMS .pmMessageEditForm input.pmButtonCancel,
.cbPMS .pmMessageEditForm .pmButton.pmButtonCancel {
  background-color: transparent !important;
  background-image: none !important;
  color: #939397 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color 0.15s, border-color 0.15s !important;
  --bs-btn-bg: transparent !important;
  --bs-btn-color: #939397 !important;
  --bs-btn-border-color: #2e2e33 !important;
}
.cbPMS .pmMessageEditForm input.pmButtonCancel:hover,
.cbPMS .pmMessageEditForm .pmButton.pmButtonCancel:hover {
  color: #c8c8cd !important;
  border-color: #57575a !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* ── Fix To input visibility ── */
/* The input-group row needs a subtle bottom border so the input area is visible */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group {
  border-bottom: 1px solid rgba(46,46,51,0.6) !important;
}
/* The #to input itself — no border but full-width flex */
.cbPMS .pmMessageEditForm #to.form-control {
  border: none !important;
  border-bottom: none !important;
}

/* Hide the "Global" checkbox button (send to all connections) — admin-level feature */
.cbPMS .pmMessageEditForm .pmMessageEditGlobal {
  display: none !important;
}

/* Hide CB field icons (star + info) on the To row — not useful for compose */
.cbPMS .pmMessageEditForm .cbft_text .cbFieldIcons {
  display: none !important;
}

/* Fix input-group width (d-inline-flex w-auto makes it not full-width) */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group.d-inline-flex {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── no-gutters margin fix (CB sets 45px margin-bottom) ── */
.cb_template .cbPMS .pmMessageEditForm .no-gutters {
  margin-bottom: 0 !important;
}

/* ── CB outer wrapper ── already removes double-card above;
   also ensure cb_template bg doesn't add extra padding ── */
.cbPMS .pmMessageEdit {
  padding: 0 !important;
}

/* ── Pagination ── */
.cbPMS .pmMessagesPaging {
  padding: 0.75rem 1.5rem !important;
  border-top: 1px solid #2e2e33 !important;
  background: #1F1F21 !important;
}

.cbPMS .pmMessagesPaging .pagination {
  margin: 0 !important;
}

.cbPMS .pmMessagesPaging .page-item .page-link {
  background: transparent !important;
  border: 1px solid #2e2e33 !important;
  color: #939397 !important;
  font-size: 0.8rem !important;
  padding: 0.3rem 0.6rem !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.cbPMS .pmMessagesPaging .page-item .page-link:hover {
  background: rgba(115,103,240,0.15) !important;
  border-color: rgba(115,103,240,0.55) !important;
  color: #7367f0 !important;
}

.cbPMS .pmMessagesPaging .page-item.active .page-link {
  background: rgba(115,103,240,0.2) !important;
  border-color: rgba(115,103,240,0.6) !important;
  color: #9f92fe !important;
}

.cbPMS .pmMessagesPaging .page-item.disabled .page-link {
  color: #3a3a3e !important;
  border-color: #2a2a2e !important;
}

/* ── Hide "Contenido del CMS" (jxtdbuttons) in PMS compose TinyMCE toolbar ──
   jxtdbuttons renders as a tox-tbtn--select (dropdown) and is the only
   select-type button in group 0. Bold/U/S are regular tox-tbtn buttons. */
.cbPMS .pmMessageEditForm .tox-toolbar__primary .tox-toolbar__group:first-child .tox-tbtn--select {
  display: none !important;
}

/* ── TinyMCE toolbar icons — fix dark-on-dark issue ──
   TinyMCE oxide-dark skin should handle this, but force white if needed */
.cbPMS .pmMessageEditForm .tox .tox-tbtn svg {
  fill: #c8c8cd !important;
}
.cbPMS .pmMessageEditForm .tox .tox-tbtn:hover svg {
  fill: #ffffff !important;
}
.cbPMS .pmMessageEditForm .tox .tox-tbtn--disabled svg,
.cbPMS .pmMessageEditForm .tox .tox-tbtn[aria-disabled="true"] svg {
  fill: #3a3a3e !important;
}

/* ── TinyMCE statusbar — hidden in PMS compose ── */
.cbPMS .pmMessageEditForm .tox .tox-statusbar {
  display: none !important;
}
/* Keep selector below for reference but it no longer fires: */
.cbPMS .pmMessageEditForm .tox .tox-statusbar--DISABLED {
  background: #1F1F21 !important;
  border-top: 1px solid #2e2e33 !important;
  color: #57575a !important;
}
.cbPMS .pmMessageEditForm .tox .tox-statusbar__text-container,
.cbPMS .pmMessageEditForm .tox .tox-statusbar a,
.cbPMS .pmMessageEditForm .tox .tox-statusbar__wordcount {
  color: #57575a !important;
}

/* ── TinyMCE editor area — ensure visible text ──
   Inject via tinymce-content.css is the right approach;
   this CSS targets the iframe wrapper in case oxide-dark skin isn't loaded */
.cbPMS .pmMessageEditForm .tox .tox-edit-area {
  background: #161618 !important;
}
.cbPMS .pmMessageEditForm .tox .tox-edit-area__iframe {
  background: #161618 !important;
}

/* ═══════════════════════════════════════════════════════════
   PMS COMPOSE — Email-composer layout
   ═══════════════════════════════════════════════════════════ */

/* ── Outer card wrapper ── */
.cbPMS .pmMessageEdit {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Title row ── */
.cbPMS .pmMessageEditForm .pmMessageEditTitle {
  padding: 1.25rem 1.5rem 1rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditTitle .cb-page-header-title {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #c8c8cd !important;
  letter-spacing: 0.01em !important;
}

/* ── "Para" row — flat, dashed separator ── */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line {
  display: flex !important;
  align-items: center !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line label {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 3rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #939397 !important;
  padding: 0 !important;
  margin-right: 0.75rem !important;
}
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .cb_field {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* Fix input-group to fill row */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
}
/* Input: transparent, no border, no background */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line input.pmMessageEditTo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #c8c8cd !important;
  font-size: 0.95rem !important;
  padding: 0 !important;
  height: auto !important;
  flex: 1 !important;
}
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line input.pmMessageEditTo:focus {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line input.pmMessageEditTo::placeholder {
  color: #57575a !important;
}
/* input-group-append: inline flex, no border */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group-append {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  background: transparent !important;
  margin-left: auto !important;
}

/* ── Users button — orange ── */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background: #1F1F21 !important;
  border: 1px solid rgba(255,159,67,0.55) !important;
  border-radius: 0.5rem !important;
  color: #ff9f43 !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn:hover {
  background: #1F1F21 !important;
  border-color: rgba(255,159,67,0.8) !important;
  color: #ffb976 !important;
  box-shadow: 0 0 0 1px rgba(255,159,67,0.25) !important;
}
/* ── Globe button — neutral grey (matches Cancelar) ── */
.cbPMS .pmMessageEditForm .pmMessageEditGlobal label.btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 0.5rem !important;
  color: #939397 !important;
  font-size: 0.9rem !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditGlobal label.btn:hover {
  background: #1F1F21 !important;
  border-color: #57575a !important;
  color: #c8c8cd !important;
}
/* Force override select2-bootstrap theme on the users button */
.cbPMS .pmMessageEditForm .input-group-append .select2-container.pmMessageEditConn.select2-container--bootstrap {
  background: #1F1F21 !important;
  border: 1px solid rgba(255,159,67,0.55) !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  width: 34px !important;
  height: 34px !important;
}
.cbPMS .pmMessageEditForm .input-group-append .select2-container.pmMessageEditConn.select2-container--bootstrap:hover {
  border-color: rgba(255,159,67,0.8) !important;
  box-shadow: 0 0 0 1px rgba(255,159,67,0.25) !important;
}
/* Force orange on the FA ::before pseudo-element (the actual icon) */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn.fa.fa-users::before {
  color: #ff9f43 !important;
}
/* Hide select2 internal selection widget */
.cbPMS .pmMessageEditForm .select2-container.pmMessageEditConn .select2-selection {
  background: transparent !important;
  border: none !important;
  display: none !important;
}
/* Globe checkbox hidden, label acts as toggle */
.cbPMS .pmMessageEditForm .pmMessageEditGlobal {
  display: flex !important;
  align-items: center !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditGlobal input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
/* Force exact size on globe label — FA icon must not expand it */
.cbPMS .pmMessageEditForm .pmMessageEditGlobal label.btn {
  min-width: 34px !important;
  max-width: 34px !important;
  overflow: hidden !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditGlobal label.btn .fa {
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
/* Checked state */
.cbPMS .pmMessageEditForm .pmMessageEditGlobal input[type="checkbox"]:checked + label.btn {
  background: rgba(115,103,240,0.3) !important;
  border-color: #7367f0 !important;
  color: #fff !important;
}
/* Hide cbFieldIcons tooltip dots in the Para row */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .cbFieldIcons {
  display: none !important;
}

/* ── "Mensaje" row — hide label, full-width editor ── */
.cbPMS .pmMessageEditForm .pmMessageEditMessage {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditMessage > label {
  display: none !important;
}
.cbPMS .pmMessageEditForm .pmMessageEditMessage .cb_field {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
/* Para row — remove underline borders */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line {
  border-bottom: none !important;
  padding-top: 1rem !important;
  padding-bottom: calc(1rem - 2px) !important;
}
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line .input-group,
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line select {
  border-bottom: none !important;
}

/* TinyMCE wrapper: no top border (title row dashed acts as separator) */
.cbPMS .pmMessageEditForm .tox-tinymce {
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
  border-radius: 0 !important;
}
.cbPMS .pmMessageEditForm .tox .tox-toolbar-overlord,
.cbPMS .pmMessageEditForm .tox .tox-toolbar__primary {
  border-bottom: none !important;
}
.cbPMS .pmMessageEditForm .tox .tox-editor-header {
  border-top: 1px dashed rgba(228,230,252,0.12) !important;
}

/* ── Hide System Message row ── */
.cbPMS .pmMessageEditForm .cbft_yesno.cb_form_line {
  display: none !important;
}
/* Hide the "Alternar editor" toggle button ── */
.cbPMS .pmMessageEditForm .js-tiny-toggler-button {
  display: none !important;
}
/* Hide cbFieldIcons in message row ── */
.cbPMS .pmMessageEditForm .pmMessageEditMessage .cbFieldIcons {
  display: none !important;
}

/* ── Submit row — bottom bar ── */
.cbPMS .pmMessageEditForm .row.no-gutters:not(.cb_form_line) input.pmButton,
.cbPMS .pmMessageEditForm .row.no-gutters:not(.cb_form_line) button.pmButton {
  margin-bottom: 0 !important;
}
.cbPMS .pmMessageEditForm .row.no-gutters:not(.cb_form_line) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1.5rem !important;
  margin: 0 !important;
  border-top: 1px dashed rgba(228,230,252,0.12) !important;
}
.cbPMS .pmMessageEditForm .row.no-gutters:not(.cb_form_line) .offset-sm-3 {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100% !important;
  justify-content: space-between !important;
}
/* Enviar mensaje — solid purple */
.cbPMS .pmMessageEditForm input.pmButtonSubmit,
.cbPMS .pmMessageEditForm button.pmButtonSubmit {
  background: #7367f0 !important;
  border: 1px solid #7367f0 !important;
  color: #fff !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: background 0.15s, box-shadow 0.15s !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
.cbPMS .pmMessageEditForm input.pmButtonSubmit:hover,
.cbPMS .pmMessageEditForm button.pmButtonSubmit:hover {
  background: #5f4afe !important;
  border-color: #5f4afe !important;
  box-shadow: 0 4px 12px rgba(115,103,240,0.4) !important;
  color: #fff !important;
}
/* Cancelar — ghost */
.cbPMS .pmMessageEditForm .pmButtonCancel {
  background: rgba(115,103,240,0.15) !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  color: #7367f0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  white-space: nowrap !important;
}
.cbPMS .pmMessageEditForm .pmButtonCancel:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}

/* PMS — Globe (all users) button: grey, not purple */
.cbPMS label.btn-primary.rounded-start-0 {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  color: #939397 !important;
  box-shadow: none !important;
}
.cbPMS label.btn-primary.rounded-start-0:hover {
  background: #1F1F21 !important;
  border-color: #57575a !important;
  color: #c8c8cd !important;
}
.cbPMS label.btn-primary.rounded-start-0:focus,
.cbPMS label.btn-primary.rounded-start-0:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* PMS — Select2 connection picker (dark mode) */
.cbPMS .select2-dropdown,
.select2-container--bootstrap.select2-container--open .select2-dropdown {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  color: #c8c8cd !important;
}
.cbPMS .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap.select2-container--open .select2-search--dropdown .select2-search__field {
  background: #161618 !important;
  border: 1px solid #2e2e33 !important;
  color: #c8c8cd !important;
  outline: none !important;
}
.cbPMS .select2-results__option,
.select2-container--bootstrap.select2-container--open .select2-results__option {
  color: #c8c8cd !important;
  background: #1F1F21 !important;
}
.cbPMS .select2-results__option--highlighted,
.select2-container--bootstrap.select2-container--open .select2-results__option--highlighted {
  background: rgba(115,103,240,0.2) !important;
  color: #9f92fe !important;
}
.cbPMS .select2-results__option[aria-selected="true"],
.select2-container--bootstrap.select2-container--open .select2-results__option[aria-selected="true"] {
  background: rgba(115,103,240,0.12) !important;
  color: #7367f0 !important;
}
/* Header tooltip above dropdown */
.cbPMS .select2-container--bootstrap .select2-results > .select2-results__options,
.select2-container--bootstrap.select2-container--open .select2-results > .select2-results__options {
  background: #1F1F21 !important;
}

/* PMS — "Para" row: dashed separator line between label/input and icon buttons */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line {
  border-bottom: 1px dashed rgba(228,230,252,0.12) !important;
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}
/* Make the input a short ghost pill — not full-width */
.cbPMS .pmMessageEditForm .cbft_text.cb_form_line input#to.pmMessageEditTo.form-control {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(228,230,252,0.08) !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.6rem !important;
  height: auto !important;
  flex: 0 1 320px !important;  /* grows up to 320px, shrinks on smaller screens */
  min-width: 120px !important;
}

/* People (connections) icon button — gap before globe (gap:6px on append handles spacing) */
.cbPMS .pmMessageEditForm .input-group-append .select2-container.pmMessageEditConn {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* PMS TinyMCE — remove double toolbar border (background-image draws a 1px line) */
.cbPMS .pmMessageEditForm .tox .tox-toolbar__primary {
  background-image: none !important;
}

/* ================================================
   PMS Inbox — Recibido + Search bar fix
   Split the unified pill into: borderless dropdown + bordered search box
   ================================================ */

/* Form and input-group must stretch full width of their col */
.pmMessages .pmMessagesForm,
.pmMessages .pmMessagesForm .input-group {
  width: 100% !important;
}

/* 1. Remove border from the outer input-group (kills the unified pill) */
.pmMessages .pmMessagesForm .input-group {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

/* 2. Recibido Select2 — no border, no background, pushed to far right */
.pmMessages .pmMessagesForm .input-group .select2-container.pmSearchType {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-left: auto !important;
  padding-left: 16px !important;
}
.pmMessages .pmMessagesForm .input-group .select2-container.pmSearchType .select2-selection {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 3. Wrap the search icon prepend + input in a bordered rounded pill */
.pmMessages .pmMessagesForm .input-group-prepend {
  border-top: 1px solid #2e2e33 !important;
  border-bottom: 1px solid #2e2e33 !important;
  border-left: 1px solid #2e2e33 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  background: transparent !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  margin-right: 0 !important;
}

.pmMessages .pmMessagesForm .input-group .pmSearch {
  border-top: 1px solid #2e2e33 !important;
  border-bottom: 1px solid #2e2e33 !important;
  border-right: 1px solid #2e2e33 !important;
  border-left: none !important;
  border-radius: 0 8px 8px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 80px !important;
  padding-left: 4px !important;
}

.pmMessages .pmMessagesForm .input-group .pmSearch:focus {
  border-color: rgba(115,103,240,0.55) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── PMS: Kebab menu icon (⋮) — fix invisible dark-on-dark ── */
.pmMessagesRowMsgMenu a.cbDropdownMenu,
.pmMessagesRowMsgMenu a.cbDropdownMenu .fa-ellipsis-v {
  color: #939397 !important;
}
.pmMessagesRowMsgMenu a.cbDropdownMenu:hover,
.pmMessagesRowMsgMenu a.cbDropdownMenu:hover .fa-ellipsis-v {
  color: #c8c8cd !important;
}

/* PMS: Kebab dropdown — kill double-box from qtip wrapper */
.qtip.qtip-menu.popover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: translateX(-20px) !important;
}
.qtip.qtip-menu.popover .popover-body {
  padding: 0 !important;
}

/* PMS: Dropdown menu (Delete/Edit) dark theme */
.pmMessagesMenuItems.dropdown-menu {
  background: #1F1F21 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 6px !important;
}
.pmMessagesMenuItems .dropdown-item {
  color: #c8c8cd !important;
}
.pmMessagesMenuItems .dropdown-item:hover {
  background: rgba(115,103,240,0.15) !important;
  color: #7367f0 !important;
}
.pmMessagesMenuItems .dropdown-item .fa-trash-o {
  color: #ef4444 !important;
}
.pmMessagesMenuItems .dropdown-item:hover .fa-trash-o {
  color: #f87171 !important;
}

/* PMS: Reply form inside message view */
.cbPMS .pmMessageReplyForm {
  padding: 0 24px 20px 24px !important;
}
.cbPMS .pmMessageReplyForm hr {
  border-color: #2e2e33 !important;
}
/* Override CB template green .btn-primary — needs body .cb_template for specificity */
body .cb_template .cbPMS .pmButtonSubmit.btn-primary,
body .cb_template .cbPMS input.pmButtonSubmit {
  background: rgba(115,103,240,0.15) !important;
  color: #7367f0 !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 6px !important;
  padding: 0.45rem 1.1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
body .cb_template .cbPMS .pmButtonSubmit.btn-primary:hover,
body .cb_template .cbPMS input.pmButtonSubmit:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}
/* Reply form Back button — secondary: outline-only, no fill */
.cbPMS .pmMessageReplyForm .pmButtonBack {
  background: transparent !important;
  color: #939397 !important;
  border: 1px solid #2e2e33 !important;
  border-radius: 6px !important;
  padding: 0.45rem 1.1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}
.cbPMS .pmMessageReplyForm .pmButtonBack:hover {
  color: #c8c8cd !important;
  border-color: #57575a !important;
  background: transparent !important;
}
/* Reply form button row spacing */
.cbPMS .pmMessageReplyForm .row.no-gutters {
  margin-top: 1rem !important;
}
/* TinyMCE editor inside reply — remove info icon row clutter */
.cbPMS .pmMessageReplyForm .cbFieldIcons {
  display: none !important;
}

/* ── OS Campus Certificates (mycertificates): Dark theme ── */

/* Reduce card padding */
.demo-card:has(#oscampus.oscampus-mycertificates) .demo-card-body {
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* Hide page title */
#oscampus.oscampus-mycertificates .page-header {
  display: none !important;
}

/* Table container */
#oscampus.oscampus-mycertificates .osc-table {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* All rows: reset backgrounds and add bottom border */
#oscampus.oscampus-mycertificates .osc-section {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2e2e33 !important;
  padding: 0.4rem 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Heading row */
#oscampus.oscampus-mycertificates .osc-row-heading {
  border-bottom: 1px solid #2e2e33 !important;
  padding: 0.35rem 0 !important;
}
#oscampus.oscampus-mycertificates .osc-row-heading div {
  color: #939397 !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
#oscampus.oscampus-mycertificates .osc-row-heading .fas {
  color: #7367f0 !important;
  font-size: 0.8rem !important;
  margin-right: 0.35rem !important;
}

/* Data rows: last row no border */
#oscampus.oscampus-mycertificates .osc-row-one:last-child {
  border-bottom: none !important;
}

/* Course name links */
#oscampus.oscampus-mycertificates .osc-certificate-course a {
  color: #7367f0 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-size: 0.84rem !important;
}
#oscampus.oscampus-mycertificates .osc-certificate-course a:hover {
  color: #9f92fe !important;
}

/* Date text */
#oscampus.oscampus-mycertificates .osc-certificate-date {
  color: #939397 !important;
  font-size: 0.8rem !important;
}

/* Download link → ghost button style */
#oscampus.oscampus-mycertificates .osc-certificate-download a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: #7367f0 !important;
  background: rgba(115,103,240,0.15) !important;
  border: 1px solid rgba(115,103,240,0.55) !important;
  border-radius: 0.375rem !important;
  padding: 0.25rem 0.7rem !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}
#oscampus.oscampus-mycertificates .osc-certificate-download a:hover {
  background: rgba(115,103,240,0.28) !important;
  border-color: rgba(115,103,240,0.7) !important;
  color: #9f92fe !important;
  box-shadow: 0 0 0 1px rgba(115,103,240,0.25) !important;
}
#oscampus.oscampus-mycertificates .osc-certificate-download .fas {
  font-size: 0.75rem !important;
}

/* Grid columns — prevent overflow */
#oscampus.oscampus-mycertificates .osc-table {
  overflow: hidden !important;
}
#oscampus.oscampus-mycertificates .block6 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#oscampus.oscampus-mycertificates .block3 {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
#oscampus.oscampus-mycertificates .osc-certificate-date {
  width: 180px !important;
  flex-shrink: 0 !important;
}
#oscampus.oscampus-mycertificates .osc-certificate-download {
  width: 130px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
}
#oscampus.oscampus-mycertificates .osc-row-heading .block3:nth-child(2) {
  width: 180px !important;
  flex: 0 0 180px !important;
}
#oscampus.oscampus-mycertificates .osc-row-heading .block3:last-child {
  width: 130px !important;
  flex: 0 0 130px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
#oscampus.oscampus-mycertificates .osc-row-heading .block3:last-child .fas {
  display: inline !important;
}