/**
 * Geometry Tooltip Styles
 * Mathematical information on hover
 */

.geometry-tooltip {
  position: absolute;
  z-index: 1000;
  background: rgba(40, 44, 52, 0.95);
  color: #abb2bf;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-family: 'Courier New', monospace;
  line-height: 1.6;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 280px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  backdrop-filter: blur(8px);
}

.geometry-tooltip:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.geometry-tooltip.hidden {
  opacity: 0;
  transform: translateY(-5px);
}

/* Tooltip Arrow */
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.tooltip-arrow.top {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: rgba(40, 44, 52, 0.95) transparent transparent transparent;
}

.tooltip-arrow.bottom {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent rgba(40, 44, 52, 0.95) transparent;
}

.tooltip-arrow.left {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent rgba(40, 44, 52, 0.95);
}

.tooltip-arrow.right {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent rgba(40, 44, 52, 0.95) transparent transparent;
}

/* Tooltip Content Styling */
.tooltip-content {
  font-weight: 400;
}

.tooltip-title {
  color: #61afef;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}

.tooltip-property {
  margin: 2px 0;
  display: block;
}

.tooltip-label {
  color: #e06c75;
  font-weight: 500;
}

.tooltip-value {
  color: #98c379;
  font-weight: 600;
}

.tooltip-equation {
  color: #e5c07b;
  font-style: italic;
  font-family: 'Times New Roman', serif;
}

.tooltip-coordinates {
  color: #c678dd;
  font-weight: 500;
}

.tooltip-measurement {
  color: #56b6c2;
  font-weight: 500;
}

.tooltip-type {
  color: #d19a66;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* Multi-line tooltips */
.tooltip-multiline {
  white-space: pre-line;
  max-width: 300px;
}

/* Special tooltip variants */
.tooltip-point {
  border-left: 3px solid #e74c3c;
}

.tooltip-line {
  border-left: 3px solid #3498db;
}

.tooltip-circle {
  border-left: 3px solid #9b59b6;
}

.tooltip-function {
  border-left: 3px solid #f39c12;
}

.tooltip-triangle {
  border-left: 3px solid #27ae60;
}

.tooltip-polygon {
  border-left: 3px solid #e67e22;
}

.tooltip-measurement {
  border-left: 3px solid #95a5a6;
}

/* Hover states for elements with tooltips */
.has-tooltip {
  cursor: help;
}

/* Subtle indicator for elements with tooltips */
.has-tooltip:hover {
  filter: brightness(1.1);
}

/* Animation for tooltip appearance */
@keyframes tooltip-appear {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.geometry-tooltip.appearing {
  animation: tooltip-appear 200ms ease-out forwards;
}

/* Responsive design */
@media (max-width: 768px) {
  .geometry-tooltip {
    font-size: 12px;
    padding: 6px 10px;
    max-width: 250px;
  }
  
  .tooltip-title {
    font-size: 13px;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .geometry-tooltip {
    background: #000;
    border: 2px solid #fff;
    color: #fff;
  }
  
  .tooltip-arrow.top {
    border-color: #000 transparent transparent transparent;
  }
  
  .tooltip-arrow.bottom {
    border-color: transparent transparent #000 transparent;
  }
  
  .tooltip-arrow.left {
    border-color: transparent transparent transparent #000;
  }
  
  .tooltip-arrow.right {
    border-color: transparent #000 transparent transparent;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .geometry-tooltip {
    transition: none;
    animation: none;
  }
  
  .geometry-tooltip.appearing {
    animation: none;
  }
}