/* Custom styles for checkbox container and labels */

/* Ensure flex children can shrink so the scrollable area works */
.d-flex.flex-column > #checkbox-container,
#checkbox-container {
  min-height: 0; /* important for flex scrolling */
  overflow-y: auto;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.35rem;
}

/* Make details/summary full width inside the container */
#checkbox-container details {
  width: 100%;
}

/* Labels: checkbox left, text right, truncated with ellipsis */
#checkbox-container label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.25rem 0.35rem;
}

#checkbox-container label input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

#checkbox-container label > .text-truncate,
#checkbox-container label > div {
  display: inline-block;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If Bootstrap .col exists inside labels, override to inline behavior */
#checkbox-container label .col {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Add padding at the bottom of the graph container so the last graph can be scrolled into view */
#graph-container {
  padding-bottom: 8rem;
  box-sizing: border-box;
}

/* Add padding at the bottom of the graph container so the last graph can be scrolled into view */
#dashboard-container {
  padding-bottom: 8rem;
  box-sizing: border-box;
}

#company-name {
  margin-bottom: 0;
}

/* Theoretisch wäre das schon durch bootstrap.css kein Problem mehr
aber es wird vom external Stylesheet überschrieben,
das ich bisher noch nicht ausbinden wollte,
da man sich sonst um Icons kümmern muss */
.img-thumbnail{
  border-radius: 0;
  max-width: 60px;
}

.tab {
  padding: 10px 25px !important;
}