:root {
  --primary-soft: #cdbebe;
}

.ticket-card.ticket-unread.active > .ticket-item, .ticket-list-items > .ticket-card.ticket-unread.is-active > .ticket-content {
  background: rgba(0, 0, 0, 0.075);
  opacity: 1;
}

.ticket-card.ticket-read, .ticket-list-items > .ticket-card.ticket-read > .ticket-content {
  background-color: var(--primary-soft);
  font-weight: normal !important;
  opacity: 0.5;
}

.ticket-card.ticket-read > .ticket-item > .ticket-title, .ticket-list-items > .ticket-card.ticket-read > .ticket-content > .ticket-title {
  font-weight: normal !important;
}

.ticket-card.ticket-read.active > .ticket-item, .ticket-list-items > .ticket-card.ticket-read.is-active > .ticket-content {
  background: rgba(0, 0, 0, 0.075);
  opacity: 1;
}

.sort-indicator {
  -webkit-text-stroke-width: thick;
}


.ticket-card:hover * .display-on-row-hover {
    display: inline-block!important;
}

.ticket-title {
    font-weight: 600;
    color: #0f172a;
    font-size: 15px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#RelatedTicketsCard .ticket-title,
#RelatedTicketsCard .ticket-category {
  display: block;             /* nodig voor ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
}

.btn[data-bs-toggle="collapse"].hide-when-not-collapsed:not(.collapsed) {
    display: none;
}

.card-header[data-bs-toggle="collapse"]:not(.collapsed) > .hide-when-not-collapsed{
    display: none!important;
}
.card-header[data-bs-toggle="collapse"] > .hide-when-not-collapsed{
    display: block!important;
}



.btn[data-bs-toggle="collapse"].collapsed > .text-collapsed, .btn[data-bs-toggle="collapse"]:not(.collapsed) > .text-expanded {
    display: inline-block!important;
}
.btn[data-bs-toggle="collapse"]:not(.collapsed) > .text-collapsed, .btn[data-bs-toggle="collapse"].collapsed > .text-expanded {
    display: none!important;
}

/* 1. De Preview-tekst container */
.preview-wrapper {
    display: grid;
    grid-template-rows: 1fr; /* Open staat */
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.4s ease;
    opacity: 1;
    overflow: hidden;
}

/* Wanneer de header NIET collapsed is (mail is open), gaat preview naar 0 */
.message-collapse-header:not(.collapsed) .preview-wrapper {
    grid-template-rows: 0fr; /* Schuift vloeiend dicht */
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. Zorg dat de Bootstrap body animatie zelf extra smooth is */
.collapse {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* De inner-div van de grid-trick */
.preview-content {
    min-height: 0;
}