/* =====================================================================
   Tooltip Component
   Advanced tooltip system with full accessibility and smart positioning
   ===================================================================== */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  /* Core Properties */
  --c-tooltip-z-index: var(--ds-z-tooltip);
  --c-tooltip-max-width: 280px;
  --c-tooltip-min-width: 0;

  /* Spacing */
  --c-tooltip-padding-x: var(--ds-space-m);
  --c-tooltip-padding-y: var(--ds-space-s);
  --c-tooltip-offset: var(--ds-space-s);

  /* Colors */
  --c-tooltip-bg: rgba(12, 26, 61, 0.96);
  --c-tooltip-text: rgb(255, 255, 255);
  --c-tooltip-border: transparent;

  /* Typography */
  --c-tooltip-font-size: var(--ds-font-size-s);
  --c-tooltip-font-weight: var(--ds-font-weight-normal);
  --c-tooltip-line-height: var(--ds-line-height-m);

  /* Shape */
  --c-tooltip-radius: var(--ds-radius-m);
  --c-tooltip-shadow: var(--ds-shadow-tooltip);

  /* Arrow */
  --c-tooltip-arrow-size: 6px;
  --c-tooltip-arrow-offset: var(--ds-space-m);

  /* Animation */
  --c-tooltip-duration: var(--ds-duration-fast);
  --c-tooltip-easing: var(--ds-ease-out);
  --c-tooltip-delay-show: 200ms;
  --c-tooltip-delay-hide: 0ms;
  --c-tooltip-scale-start: 0.96;
  --c-tooltip-translate-start: 4px;
}

/* ========================================
   Tooltip Portal Container
   Uses isolation to create new stacking context
   ======================================== */

.c-tooltip-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: var(--c-tooltip-z-index);
  pointer-events: none;
  isolation: isolate;
}

/* ========================================
   Base Tooltip
   ======================================== */

.c-tooltip {
  position: absolute;
  z-index: var(--c-tooltip-z-index);

  max-width: var(--c-tooltip-max-width);
  min-width: var(--c-tooltip-min-width);
  width: max-content;
  padding: var(--c-tooltip-padding-y) var(--c-tooltip-padding-x);

  background: var(--c-tooltip-bg);
  color: var(--c-tooltip-text);
  border: 1px solid var(--c-tooltip-border);
  border-radius: var(--c-tooltip-radius);
  box-shadow: var(--c-tooltip-shadow);

  font-size: var(--c-tooltip-font-size);
  font-weight: var(--c-tooltip-font-weight);
  line-height: var(--c-tooltip-line-height);
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  will-change: opacity, transform, visibility;
  transition:
    opacity var(--c-tooltip-duration) var(--c-tooltip-easing),
    transform var(--c-tooltip-duration) var(--c-tooltip-easing),
    visibility var(--c-tooltip-duration) var(--c-tooltip-easing);

  isolation: isolate;
}

/* ========================================
   Tooltip Content Structure
   ======================================== */

.c-tooltip__content {
  display: block;
}

.c-tooltip__title {
  display: block;
  font-weight: var(--ds-font-weight-semibold);
  margin-bottom: var(--ds-space-xs);
}

.c-tooltip__body {
  display: block;
}

.c-tooltip__footer {
  display: flex;
  gap: var(--ds-space-s);
  margin-top: var(--ds-space-s);
  padding-top: var(--ds-space-s);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.c-tooltip__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-right: var(--ds-space-xs);
}

/* ========================================
   Tooltip Arrow
   ======================================== */

.c-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}

/* ========================================
   Position: Top (default)
   ======================================== */

.c-tooltip--top,
.c-tooltip--top-start,
.c-tooltip--top-end {
  transform-origin: bottom center;
  transform: translateY(var(--c-tooltip-translate-start)) scale(var(--c-tooltip-scale-start));
}

.c-tooltip--top .c-tooltip__arrow,
.c-tooltip--top-start .c-tooltip__arrow,
.c-tooltip--top-end .c-tooltip__arrow {
  top: 100%;
  border-width: var(--c-tooltip-arrow-size) var(--c-tooltip-arrow-size) 0;
  border-color: var(--c-tooltip-bg) transparent transparent transparent;
}

.c-tooltip--top .c-tooltip__arrow {
  left: 50%;
  transform: translateX(-50%);
}

.c-tooltip--top-start .c-tooltip__arrow {
  left: var(--c-tooltip-arrow-offset);
}

.c-tooltip--top-end .c-tooltip__arrow {
  right: var(--c-tooltip-arrow-offset);
}

/* ========================================
   Position: Bottom
   ======================================== */

.c-tooltip--bottom,
.c-tooltip--bottom-start,
.c-tooltip--bottom-end {
  transform-origin: top center;
  transform: translateY(calc(-1 * var(--c-tooltip-translate-start))) scale(var(--c-tooltip-scale-start));
}

.c-tooltip--bottom .c-tooltip__arrow,
.c-tooltip--bottom-start .c-tooltip__arrow,
.c-tooltip--bottom-end .c-tooltip__arrow {
  bottom: 100%;
  border-width: 0 var(--c-tooltip-arrow-size) var(--c-tooltip-arrow-size);
  border-color: transparent transparent var(--c-tooltip-bg) transparent;
}

.c-tooltip--bottom .c-tooltip__arrow {
  left: 50%;
  transform: translateX(-50%);
}

.c-tooltip--bottom-start .c-tooltip__arrow {
  left: var(--c-tooltip-arrow-offset);
}

.c-tooltip--bottom-end .c-tooltip__arrow {
  right: var(--c-tooltip-arrow-offset);
}

/* ========================================
   Position: Left
   ======================================== */

.c-tooltip--left,
.c-tooltip--left-start,
.c-tooltip--left-end {
  transform-origin: right center;
  transform: translateX(var(--c-tooltip-translate-start)) scale(var(--c-tooltip-scale-start));
}

.c-tooltip--left .c-tooltip__arrow,
.c-tooltip--left-start .c-tooltip__arrow,
.c-tooltip--left-end .c-tooltip__arrow {
  left: 100%;
  border-width: var(--c-tooltip-arrow-size) 0 var(--c-tooltip-arrow-size) var(--c-tooltip-arrow-size);
  border-color: transparent transparent transparent var(--c-tooltip-bg);
}

.c-tooltip--left .c-tooltip__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.c-tooltip--left-start .c-tooltip__arrow {
  top: var(--c-tooltip-arrow-offset);
}

.c-tooltip--left-end .c-tooltip__arrow {
  bottom: var(--c-tooltip-arrow-offset);
}

/* ========================================
   Position: Right
   ======================================== */

.c-tooltip--right,
.c-tooltip--right-start,
.c-tooltip--right-end {
  transform-origin: left center;
  transform: translateX(calc(-1 * var(--c-tooltip-translate-start))) scale(var(--c-tooltip-scale-start));
}

.c-tooltip--right .c-tooltip__arrow,
.c-tooltip--right-start .c-tooltip__arrow,
.c-tooltip--right-end .c-tooltip__arrow {
  right: 100%;
  border-width: var(--c-tooltip-arrow-size) var(--c-tooltip-arrow-size) var(--c-tooltip-arrow-size) 0;
  border-color: transparent var(--c-tooltip-bg) transparent transparent;
}

.c-tooltip--right .c-tooltip__arrow {
  top: 50%;
  transform: translateY(-50%);
}

.c-tooltip--right-start .c-tooltip__arrow {
  top: var(--c-tooltip-arrow-offset);
}

.c-tooltip--right-end .c-tooltip__arrow {
  bottom: var(--c-tooltip-arrow-offset);
}

/* ========================================
   Visible State
   ======================================== */

.c-tooltip--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0) scale(1);
}

.c-tooltip--visible.c-tooltip--interactive {
  pointer-events: auto;
}

/* ========================================
   Size Variants
   ======================================== */

.c-tooltip--size-xs {
  --c-tooltip-padding-x: var(--ds-space-xs);
  --c-tooltip-padding-y: var(--ds-space-xs);
  --c-tooltip-font-size: var(--ds-font-size-xs);
  --c-tooltip-max-width: 180px;
  --c-tooltip-arrow-size: 4px;
}

.c-tooltip--size-s {
  --c-tooltip-padding-x: var(--ds-space-s);
  --c-tooltip-padding-y: var(--ds-space-xs);
  --c-tooltip-font-size: var(--ds-font-size-xs);
  --c-tooltip-max-width: 220px;
  --c-tooltip-arrow-size: 5px;
}

.c-tooltip--size-m {
  /* Default size, uses base values */
}

.c-tooltip--size-l {
  --c-tooltip-padding-x: var(--ds-space-l);
  --c-tooltip-padding-y: var(--ds-space-m);
  --c-tooltip-font-size: var(--ds-font-size-m);
  --c-tooltip-max-width: 360px;
  --c-tooltip-arrow-size: 8px;
}

.c-tooltip--size-xl {
  --c-tooltip-padding-x: var(--ds-space-xl);
  --c-tooltip-padding-y: var(--ds-space-l);
  --c-tooltip-font-size: var(--ds-font-size-m);
  --c-tooltip-max-width: 480px;
  --c-tooltip-arrow-size: 10px;
}

/* ========================================
   Color Variants
   ======================================== */

/* Light */
.c-tooltip--light {
  --c-tooltip-bg: var(--ds-color-surface);
  --c-tooltip-text: var(--ds-color-text);
  --c-tooltip-border: var(--ds-color-border);
}

.c-tooltip--light .c-tooltip__footer {
  border-top-color: var(--ds-color-border);
}

/* Info */
.c-tooltip--info {
  --c-tooltip-bg: var(--ds-color-status-info);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* Success */
.c-tooltip--success {
  --c-tooltip-bg: var(--ds-color-status-success);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* Warning */
.c-tooltip--warning {
  --c-tooltip-bg: var(--ds-color-status-warning);
  --c-tooltip-text: var(--ds-color-text-warning-strong);
}

/* Danger / Error */
.c-tooltip--danger,
.c-tooltip--error {
  --c-tooltip-bg: var(--ds-color-status-danger);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* Highlight */
.c-tooltip--highlight {
  --c-tooltip-bg: var(--ds-color-status-highlight);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* Dark (explicit dark mode) */
.c-tooltip--dark {
  --c-tooltip-bg: var(--ds-color-status-dark);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* ========================================
   Modifiers
   ======================================== */

/* No arrow */
.c-tooltip--no-arrow .c-tooltip__arrow {
  display: none;
}

/* Nowrap (single line) */
.c-tooltip--nowrap {
  white-space: nowrap;
  max-width: none;
}

/* Multiline (explicit) */
.c-tooltip--multiline {
  white-space: normal;
  text-align: left;
}

/* Rich content tooltip */
.c-tooltip--rich {
  --c-tooltip-max-width: 360px;
  text-align: left;
}

/* Fixed width */
.c-tooltip--fixed-width {
  width: var(--c-tooltip-max-width);
}

/* Loading state */
.c-tooltip--loading .c-tooltip__content::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--ds-space-s);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: c-tooltip-spin 0.8s linear infinite;
  vertical-align: middle;
}

@keyframes c-tooltip-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   Trigger Element
   ======================================== */

[data-tooltip] {
  position: relative;
}

.c-tooltip-trigger {
  position: relative;
  cursor: inherit;
}

.c-tooltip-trigger[data-tooltip]:not(button):not([role="button"]):not(a) {
  cursor: help;
}

.c-tooltip-trigger:focus-visible {
  outline: var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset: var(--ds-focus-ring-offset);
}

/* ========================================
   Z-index Layers
   ======================================== */

.c-tooltip--z-dropdown { --c-tooltip-z-index: var(--ds-z-dropdown); }
.c-tooltip--z-popover { --c-tooltip-z-index: var(--ds-z-popover); }
.c-tooltip--z-modal { --c-tooltip-z-index: calc(var(--ds-z-modal) + 10); }
.c-tooltip--z-toast { --c-tooltip-z-index: var(--ds-z-toast); }
.c-tooltip--z-max { --c-tooltip-z-index: 99999; }

/* ========================================
   Interactive Tooltip
   ======================================== */

.c-tooltip--interactive {
  pointer-events: auto;
  cursor: default;
}

.c-tooltip--interactive a,
.c-tooltip--interactive button {
  color: inherit;
}

.c-tooltip--interactive a:hover,
.c-tooltip--interactive button:hover {
  text-decoration: underline;
  opacity: 0.85;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .c-tooltip {
    --c-tooltip-max-width: min(280px, 90vw);
    --c-tooltip-font-size: var(--ds-font-size-s);
  }

  /* Force simpler position on mobile */
  .c-tooltip--mobile-adapt {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 90vw !important;
  }

  .c-tooltip--mobile-adapt.c-tooltip--visible {
    transform: translateX(-50%) scale(1) !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .c-tooltip--touch-friendly {
    --c-tooltip-padding-x: var(--ds-space-l);
    --c-tooltip-padding-y: var(--ds-space-m);
    --c-tooltip-font-size: var(--ds-font-size-m);
  }
}

/* ========================================
   Accessibility
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
  .c-tooltip {
    border-width: 2px;
    border-color: currentColor;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .c-tooltip {
    --c-tooltip-duration: 0.01ms;
    --c-tooltip-delay-show: 0ms;
    transform: none !important;
  }

  .c-tooltip--visible {
    transform: none !important;
  }
}

/* Screen reader only */
.c-tooltip__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Disabled state */
.c-tooltip--disabled {
  display: none !important;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .c-tooltip,
  .c-tooltip-portal {
    display: none !important;
  }
}

/* ========================================
   Dark Theme Adjustments
   ======================================== */

[data-theme="dark"] .c-tooltip {
  --c-tooltip-bg: rgba(255, 255, 255, 0.96);
  --c-tooltip-text: var(--ds-color-text);
}

[data-theme="dark"] .c-tooltip--light {
  --c-tooltip-bg: var(--ds-color-surface);
  --c-tooltip-text: var(--ds-color-text);
  --c-tooltip-border: var(--ds-color-border);
}

[data-theme="dark"] .c-tooltip--dark {
  --c-tooltip-bg: rgba(12, 26, 61, 0.96);
  --c-tooltip-text: rgb(255, 255, 255);
}

/* ========================================
   Animation Variants
   ======================================== */

.c-tooltip--animation-fade {
  transform: none !important;
}

.c-tooltip--animation-fade.c-tooltip--visible {
  transform: none !important;
}

.c-tooltip--animation-scale {
  --c-tooltip-scale-start: 0.8;
}

.c-tooltip--animation-shift {
  --c-tooltip-translate-start: 8px;
  --c-tooltip-scale-start: 1;
}

/* ========================================
   Helper Icon Styles (Lucide compatible)
   ======================================== */

.c-tooltip__icon-help,
.c-tooltip__icon-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--ds-color-icon);
  cursor: help;
  vertical-align: middle;
}

.c-tooltip__icon-help:hover,
.c-tooltip__icon-info:hover {
  color: var(--ds-color-icon-hover);
}

.c-tooltip__icon-help svg,
.c-tooltip__icon-info svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--ds-icon-stroke-width);
}