.addElement:hover {
  background-color: #dee2e6 !important;
}

.a-bg:hover {
  background-color: #f6f9fc;
}

.badge-info {
  color: #03acca;
  background-color: #aaedf9;
}

.badge-success {
  color: #1aae6f;
  background-color: #b0eed3;
}

.badge-warning {
  color: #D28D32;
  background-color: #EED3B0;
}

.badge-danger {
  color: #6c757d; /* Grau für Text */
  background-color: #e9ecef; /* Hellgrau für Hintergrund */
}

.border-top-white {
  border-top: solid 1px white;
}

.header-img {
  height: 160px;
  font-size: 1rem;
  color: #03acca;
}

.cj tbody tr td:hover {
  background-color: #f0f0f0; /* hellgrau */
}


.cj-fixed {
  width: 220px;
}

.cj-dynamic {
  border: 2px solid white;
}

.cj-table {
  width: 100%;
}

.cj-spacer {
  border-bottom: 40px solid rgba(94, 114, 228, 0.2);
  /* background-color: blue; */
}

.fixed-width-20 {
  width: 20%; /* Breite der dritten Spalte */
}

.fixed-width-40 {
  width: 40%; /* Breite der ersten beiden Spalten */
}

.img-container {
  display: flex;
  align-items: center;
}

.img-container img,
.img-container .fa-image-user {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

.img-container .fa-image-user {
  font-size: 48px;
  line-height: 48px;
}

.line-break {
  word-break: break-all;
}

.max-width-column {
  max-width: 50px;
}

.rotate-270 {
  transform: rotate(270deg);
}

.description {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: box;
  -webkit-line-clamp: 2; /* Für Webkit-basierte Browser */
  line-clamp: 2; /* Standardisierte Eigenschaft für zukünftige Unterstützung */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flexbox-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  min-height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  transition: height 0.3s ease;
}

.card:hover .description {
  -webkit-line-clamp: unset;
  line-clamp: unset; /* Standardisierte Eigenschaft für zukünftige Unterstützung */
  height: auto;
  white-space: normal;
  min-height: 2.6em; /* Höhe entsprechend der Zeilenanzahl einstellen */
  overflow: visible;
}

.img-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.persona-img {
  max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter als der Container wird */
  height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
  max-height: 50px; /* Legt eine maximale Höhe für die Bilder fest, um die Größe zu regulieren */
  margin-bottom: 5px; /* Abstand nach unten, um Umbruch zu unterstützen */
}

#serviceDesignSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

#assigneeSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

#relatedTicketSuggestions {
  max-height: 320px; /* Oder eine andere gewünschte Höhe */
  overflow-y: auto;   /* Scrollen aktivieren, wenn die Liste länger ist */
  z-index: 1050;      /* Sicherstellen, dass die Liste über anderen Elementen bleibt */
}

.ticket-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.ticket-key {
  font-weight: bold;
}

.ticket-status {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-left: 8px;
  font-weight: bolder;
  text-transform: uppercase;
}

.related-ticket-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-top: 1px solid #dee2e6; /* Nur Bottom Border */
  border-radius: 0; /* Standardmäßig keine Abrundung */
}

.ticket-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tickets-icon {
  width: 12px;
  height: 12px;
  /* object-fit: contain; */
}

.ticket-key {
  font-weight: bold;
}

.badge-blue {
  color: rgb(38, 67, 233);
  background-color: rgb(234, 236, 251);
}

.badge-green {
  /* color: rgb(26, 174, 111); */
  color: rgb(20, 139, 88);
  /* background-color: rgb(176, 238, 211); */
  background-color: rgb(207, 244, 228);
}

.badge-red {
  color: rgb(248, 0, 49);
  background-color: rgb(253, 209, 218);
}

.badge-yellow {
  color: rgb(166, 140, 18);
  background-color: rgb(244, 241, 207);
}

.badge-gray {
  color: rgb(98, 116, 162);
  background-color: rgb(228, 232, 237);
}

@media (max-width: 576px) {
  .persona-img {
      max-height: 30px; /* Kleinere Bilder auf sehr schmalen Bildschirmen */
  }
}

/* Schriftgröße der Pips anpassen */
.noUi-value {
  font-size: 12px;
  font-weight: 600;
  color: #344767;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 10px;
  width: 2px;
}

/* Zusätzliche CSS-Regeln für kleinere Displays */
.small-icon i {
  font-size: 1.5rem; /* Stelle sicher, dass die Größe kleiner ist */
}

.card-mara {
  min-height: 256px;
}

.underline-link {
  text-decoration: underline;
}



#edit-file-dropzone:hover {
  background-color: #e9ecef !important;
}

#edit-file-dropzone.dragover {
  background-color: #e9ecef !important;
}

@media (max-width: 575.98px) {
  .mt-xs-7 {
    margin-top: 6rem !important;
  }
}

/* --- Custom Sidenav Toggle für mobile Ansicht (überschreibt Argon-Standard) --- */
@media (max-width: 1199.98px) {
  /* Standardmässig ist die Sidenav aus dem Bild geschoben */
  .sidenav#sidenav-main {
    transform: translateX(-17.125rem) !important; /* Argon-Standardwert, um Konflikte zu vermeiden */
    transition: transform 0.3s ease-in-out !important;
    z-index: 1040 !important; /* Stellt sicher, dass die Sidenav über dem Overlay (1035) liegt */
  }

  /* Wenn der Body die Klasse .sidenav-open hat, wird die Sidenav eingeblendet */
  body.sidenav-open .sidenav#sidenav-main {
    transform: translateX(0) !important;
  }

  /* Overlay für den Hauptinhalt, wenn die Sidenav offen ist */
  body.sidenav-open .main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1035; /* Muss unter der Sidenav (1040) aber über dem Inhalt liegen */
  }
}

/* --- Sichtbarkeit des Hamburger-Buttons erzwingen --- */
/* Stellt sicher, dass der Button auf mobilen Geräten immer sichtbar ist */
.navbar-toggler#hamburger-menu-button {
  display: flex !important; /* Wichtig, um eventuelle `display: none` Regeln zu überschreiben */
  border: none !important; /* Entfernt den Rand um den Button */
}

/* Färbt das Icon im Inneren des Buttons weiss */
.navbar-toggler#hamburger-menu-button .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-collapse#navbar {
  display: none !important; /* Verhindert, dass dieser leere Container Platz einnimmt */
}

/* --- Dynamische Breite für Suchvorschläge --- */
.search-suggestions-list {
  min-width: 100%; /* Mindestens so breit wie das Elternelement (Input-Feld) */
  width: max-content; /* Passt sich der breitesten Zeile an */
  max-width: 90vw; /* Verhindert, dass die Liste breiter als der Viewport wird */
}

.search-suggestions-list .list-group-item {
  white-space: nowrap; /* Verhindert den Zeilenumbruch innerhalb eines Listeneintrags */
}


.text-pre-wrap {
  white-space: pre-wrap !important;
  text-align: left !important;
}

/* Fix für Overlay: Fixierte Position erzwingen, damit es beim Scrollen nicht verschwindet */
body.sidenav-open .main-content::before {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1035 !important;
}
#sidenav-main {
    z-index: 1050 !important;
}

/* --- Tom Select Custom Styles (migrated from tickets.ejs) --- */

/* Fix Tom Select to match form-control-sm */
.ts-wrapper .ts-control {
  min-height: 31px !important;
  padding: 0 0.5rem !important; 
  font-size: 0.875rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  background-color: #fff !important;
  border: 1px solid #d2d6da !important; /* Bootstrap border color fallback */
}
.ts-wrapper.single .ts-control {
  height: 31px !important;
  flex-wrap: nowrap !important;
}
.ts-wrapper.multi .ts-control {
  height: auto !important;
  flex-wrap: wrap !important;
  padding: 1px 0.5rem !important; 
}
.ts-control > input {
   font-size: 0.875rem !important;
   line-height: 1.5 !important;
   height: 100% !important; /* For single */
   margin: 0 !important;
}
.ts-wrapper.multi .ts-control > input {
   height: 28px !important; /* Initial height in multi */
}
.ts-control > .item {
   font-size: 0.875rem !important;
   line-height: 1.5 !important;
   margin: 0 !important;
}
.ts-wrapper.multi .ts-control > div.item {
    background: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 0 6px;
    margin: 1px 4px 1px 0 !important;
    font-size: 0.75rem !important;
    /* Ensure close button (x) is styled correctly if present */
    display: flex;
    align-items: center;
}
.ts-dropdown {
  font-size: 0.875rem !important;
  top: 100% !important; /* Ensure it drops correctly below */
}
.ts-dropdown .option {
    padding: 0.25rem 0.5rem;
}

/* Ensure Tom Select plays nice inside input-group */
.input-group > .ts-wrapper {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-left: -1px; /* Overlap borders */
}
.input-group > .ts-wrapper .ts-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 0 !important; /* Remove separate borders */
    min-height: 32px !important; /* Standardize base height */
    height: auto !important;     /* Allow growth */
    padding: 0 8px !important;   /* Remove vertical padding, keep horizontal */
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;  /* Allow items to wrap */
    box-sizing: border-box !important; /* Ensure padding doesn't add to height */
    overflow: visible !important; /* Allow expansion */
}
.input-group > .ts-wrapper .ts-control > input {
    margin: 0 !important;         /* Prevent input margin from affecting height */
    height: 20px !important;      /* Constrain input height */
    line-height: 20px !important;
    vertical-align: middle !important;
    flex-grow: 1;                 /* Allow input to take remaining space */
    min-width: 60px;              /* Ensure input is clickable */
}
/* Style the selected item inside Tom Select */
.input-group > .ts-wrapper .ts-control .item {
    margin: 2px 4px 2px 0 !important; /* Add spacing for wrapped items */
    padding: 0 !important;
    line-height: 1.5 !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    max-width: 100%;             /* Prevent overflow */
    white-space: nowrap;         /* Prevent wrapping inside item */
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Force minimum height for operators, allow growth to match input */
.input-group .form-select-sm {
    height: auto !important;
    min-height: 32px !important;
}
/* Hide clear button to save space if needed or style it smaller */
.ts-control .clear-button {
    font-size: 0.875rem;
    margin-right: 4px !important;
}

/* Filterbereich auf kleinen Bildschirmen scrollbar machen */
#filterContainer .card-body {
  overflow: visible;
}

.modal-backdrop {
  z-index: 1040 !important;
}

.modal {
  z-index: 1050 !important;
}

/* Override existing #sidenav-main rule or prevent conflict? 
   Existing rule was just z-index. The new rule from tickets.ejs has z-index: 1030 
   while existing had 1050 in tickets.ejs? No, step 187 showed 1050.
   Tickets.ejs (step 195) had 1030!
   Using 1050 (from styles.css) is probably safer/better or consistent. 
   I will stick to 1050 or keep whatever is best. tickets.ejs had 1030. 
   styles.css had 1050. 1050 > 1030. I'll transform tickets.ejs rules to match or verify.
   If tickets.ejs had 1030, but styles.css has 1050, 1050 wins if I don't override.
   I'll skip overriding sidenav-main z-index since it's already in styles.css.
*/

/* Entfernt das Caret/Pfeil bei benutzerdefiniertem Dropdown-Toggle */
.dropdown-toggle-no-caret::after {
  display: none !important;
}

/* Verhindert das Aufblitzen des Dropdown-Menüs beim Laden */
.dropdown-menu:not(.show) {
  display: none !important;
}

.accordion-no-caret::after {
  display: none !important;
}

.emotion-selector {
  display: flex;
  justify-content: space-between;
  background: #f8f9fe;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.emotion-icon {
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.4;
  user-select: none;
}

.emotion-icon:hover {
  transform: scale(1.2);
  opacity: 0.8;
}

.emotion-icon.active {
  opacity: 1;
  transform: scale(1.3);
}

.emotion-icon.active:hover {
  transform: scale(1.4);
}

/* Multi-Select Styles */
.kanban-card.selected-card {
  border: 4px solid #5e72e4 !important;
  box-shadow: 0 0 15px rgba(94, 114, 228, 0.5) !important;
  background-color: rgba(94, 114, 228, 0.1) !important;
  z-index: 10 !important;
}

.dark-version .kanban-card.selected-card {
  background-color: rgba(94, 114, 228, 0.2) !important;
  box-shadow: 0 0 20px rgba(94, 114, 228, 0.7) !important;
}

.kanban-card.dropdown-active {
  z-index: 1100 !important;
}

/* --- CKEditor 5 Mentions Dropdown Styling Fix --- */
.ck.ck-list .ck-list__item .ck-button.ck-on {
  background: #f6f9fc !important;
  color: #344767 !important;
}
.ck.ck-list .ck-list__item .ck-button:hover:not(.ck-disabled) {
  background: #f6f9fc !important;
  color: #344767 !important;
}