/* Client Name Tooltips */
.client-name-tooltip {
  position: relative;
}

.client-name-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateY(-8px);
  background-color: #1f2937;
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: normal;
  max-width: 280px;
  min-width: 150px;
  word-wrap: break-word;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.client-name-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  transform: translateY(-3px);
  border: 5px solid transparent;
  border-top-color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10000;
  pointer-events: none;
}

.client-name-tooltip:hover::before,
.client-name-tooltip:hover::after,
.client-name-tooltip:focus::before,
.client-name-tooltip:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Alternative positioning for right-side elements */
.client-name-tooltip.tooltip-right::before {
  left: auto;
  right: 0;
}

.client-name-tooltip.tooltip-right::after {
  left: auto;
  right: 20px;
}

/* Mobile responsiveness for tooltips */
@media (max-width: 768px) {
  .client-name-tooltip::before {
    max-width: 200px;
    font-size: 0.75rem;
    min-width: 120px;
  }
}

/* Ensure tooltip stays within viewport */
.client-name-tooltip::before {
  max-width: min(280px, 80vw);
}

/* Animation for smooth tooltip appearance */
.client-name-tooltip::before,
.client-name-tooltip::after {
  pointer-events: none;
}

/* Style for tooltip on long text */
.client-name-tooltip[data-tooltip*=" "]:not([data-tooltip="Aucune note personnelle"])::before {
  white-space: normal;
  text-align: left;
}