body {
    background-color: white;
}

/* Compact driver card styles */
.compact-card {
  border-radius: .5rem;
}
.compact-card .card-body {
  padding: .5rem !important;
}
/* Ensure flex items can shrink inside cards to allow truncation */
.min-width-0 {
  min-width: 0;
}

/* Text helpers */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}
.text-break {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.small .badge, .card .badge {
  font-size: .72rem;
  padding: .18rem .36rem;
} 

@media (max-width: 575.98px) {
  .compact-card .card-body { padding: .45rem !important }
  .card .btn-sm { padding: .25rem .4rem; font-size: .78rem }
}

/* Active nav link styles to make the current section more prominent */
.navbar .nav-link.active {
  background-color: rgba(13, 110, 253, 0.08); /* subtle primary tint */
  color: #0d6efd !important; /* bootstrap primary */
  font-weight: 600;
  border-radius: 999px; /* pill */
  padding: .375rem .75rem; /* slightly larger clickable area */
  box-shadow: 0 1px 0 rgba(13,110,253,0.12) inset;
}
.navbar .nav-link.active i {
  color: #0d6efd !important;
}
.navbar .nav-link:hover {
  background-color: rgba(13,110,253,0.04);
  border-radius: 6px;
}

/* Tom Select inside Bootstrap 5 form-floating */
.form-floating {
  /* move ts-control input element below the floating label */
  .ts-wrapper.form-control,
  .ts-wrapper.form-select {
    height: 0 !important;
  }

  .ts-wrapper.form-control .ts-control,
  .ts-wrapper.form-select .ts-control {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
  }

  /* if field is styled as a text field (.form-control instead of .form-select)
   * make sure we apply the same animation as Bootstrap 5 */
  .ts-wrapper.form-control ~ label,
  .ts-wrapper.form-select ~ label {
    transform: scale(1) translateY(0) translateX(0);
    color: rgba(var(--bs-body-color-rgb), 1);
  }

  .ts-wrapper.form-control.focus ~ label,
  .ts-wrapper.form-control.full ~ label,
  .ts-wrapper.form-select.focus ~ label,
  .ts-wrapper.form-select.full ~ label,
  .ts-wrapper.form-select.has-items ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    color: rgba(var(--bs-body-color-rgb), 0.65);
  }

  /* hides empty value which tomselect uses as placeholder */
  .ts-wrapper.form-select:not(.focus) .ts-control ::placeholder {
    opacity: 0;
  }
}