/* Container & list */
.result-list { margin: 0; padding: 0; }
.result-list > .result-group {
  box-sizing: border-box;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

/* Zebra stripes */
.result-list > .result-group:nth-child(odd)  { background: #ffffff; }
.result-list > .result-group:nth-child(even) { background: #f3f4f6; }

/* Separator line between hits */
.result-list > .result-group:not(:last-child) {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Layout: left info + right chart (chart wider) */
.result-group {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: nowrap;
}
.result-group-left  { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 0 0.6rem; box-sizing: border-box; }
.result-group-right { flex: 0 0 66.6667%; max-width: 66.6667%; padding: 0 0.6rem; box-sizing: border-box; }

/* Chart container */
.motif-chart-wrapper {
  width: 100%;
  min-width: 500px; /* user requested minimum */
  box-sizing: border-box;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(15,23,42,0.02);
}

/* Chart title and rows */
.motif-chart-title { font-weight: 600; margin-bottom: .5rem; color: #0b5ed7; }
.motif-chart-rows { display: flex; flex-direction: column; gap: .6rem; }

/* Single chart row: label | bar | value */
.motif-chart-row { display: flex; align-items: center; gap: .6rem; width: 100%; box-sizing: border-box; }

/* Label */
.motif-row-label {
  flex: 0 0 28%;
  max-width: 28%;
  white-space: normal;
  padding-right: .5rem;
  box-sizing: border-box;
  font-weight: 400;
}

/* Bar container and inner bar */
.motif-bar-outer {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  padding: 2px;
  overflow: hidden;
  box-sizing: border-box;
}
.motif-bar-inner {
  display: block;
  height: 100%;
  width: 0%; /* JS should set inline percent */
  min-width: 4px;
  border-radius: 6px;
  background: linear-gradient(90deg,#0b5ed7,#3b82f6);
  transition: width .35s ease;
  box-sizing: border-box;
}

/* Numeric value (not bold) */
.motif-row-value {
  flex: 0 0 56px;
  min-width: 56px;
  text-align: right;
  color: #1f2937;
  font-weight: 400;
}

/* Ensure inner blocks are transparent so zebra shows through */
.result-list .motif-chart-wrapper,
.result-list .result-group-left,
.result-list .result-group-right { background: transparent !important; }

/* Responsive: stack columns on small screens */
@media (max-width: 767.98px) {
  .result-group { flex-direction: column; }
  .result-group-left, .result-group-right { flex: 0 0 100% !important; max-width: 100% !important; padding: 0 !important; }
  .motif-chart-wrapper { min-width: 0; margin-top: .5rem; }
  .motif-row-label { flex: 0 0 40%; max-width: 40%; }
}

/* remove hover effect for search list entries */
.result-list > .result-group:hover {
  background-color: inherit !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* also prevent child elements from changing background on hover */
.result-list > .result-group *:hover {
  background-color: transparent !important;
  box-shadow: none !important;
}