/*
 * HomeKept — Nav Icon Tooltips
 * CSS-only base; enhanced by nav-tooltips.js
 * Positions: right (default for sidebar), top, bottom, left
 */

/* ── Design tokens (mirrors root vars) ─────────────────────────────── */
:root {
  --tt-bg:      #1b2624;
  --tt-color:   #ffffff;
  --tt-radius:  8px;
  --tt-pad:     6px 11px;
  --tt-size:    12.5px;
  --tt-weight:  500;
  --tt-shadow:  0 4px 14px rgba(27,38,36,.18);
  --tt-delay:   0.08s;
  --tt-dur:     0.14s;
  --tt-offset:  10px;       /* gap between element edge and bubble */
  --tt-arrow:   5px;        /* half-size of the arrow triangle */
}

/* ── Base ───────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition:
    opacity  var(--tt-dur) ease,
    transform var(--tt-dur) ease;
  transition-delay: 0s;
}

/* Show on hover AND keyboard focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transition-delay: var(--tt-delay);
}

/* Arrow (::before) */
[data-tooltip]::before {
  content: '';
  border: var(--tt-arrow) solid transparent;
}

/* Text bubble (::after) */
[data-tooltip]::after {
  content: attr(data-tooltip);
  background: var(--tt-bg);
  color: var(--tt-color);
  padding: var(--tt-pad);
  border-radius: var(--tt-radius);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--tt-size);
  font-weight: var(--tt-weight);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--tt-shadow);
  /* prevent inheriting transforms from parent */
  transform-origin: left center;
}

/* ── RIGHT (default — sidebar icons) ───────────────────────────────── */
[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip][data-tooltip-pos="right"]::before {
  border-right-color: var(--tt-bg);
  top: 50%;
  left: calc(100% + var(--tt-offset) - var(--tt-arrow));
  transform: translateY(-50%) translateX(-5px);
}
[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-pos="right"]::after {
  top: 50%;
  left: calc(100% + var(--tt-offset) + var(--tt-arrow));
  transform: translateY(-50%) translateX(-5px);
}
[data-tooltip]:not([data-tooltip-pos]):hover::before,
[data-tooltip][data-tooltip-pos="right"]:hover::before,
[data-tooltip]:not([data-tooltip-pos]):focus-visible::before,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}
[data-tooltip]:not([data-tooltip-pos]):hover::after,
[data-tooltip][data-tooltip-pos="right"]:hover::after,
[data-tooltip]:not([data-tooltip-pos]):focus-visible::after,
[data-tooltip][data-tooltip-pos="right"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

/* ── TOP ────────────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="top"]::before {
  border-top-color: var(--tt-bg);
  bottom: calc(100% + var(--tt-offset) - var(--tt-arrow));
  left: 50%;
  transform: translateX(-50%) translateY(5px);
}
[data-tooltip][data-tooltip-pos="top"]::after {
  bottom: calc(100% + var(--tt-offset) + var(--tt-arrow));
  left: 50%;
  transform: translateX(-50%) translateY(5px);
}
[data-tooltip][data-tooltip-pos="top"]:hover::before,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-pos="top"]:hover::after,
[data-tooltip][data-tooltip-pos="top"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* ── BOTTOM ─────────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="bottom"]::before {
  border-bottom-color: var(--tt-bg);
  top: calc(100% + var(--tt-offset) - var(--tt-arrow));
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
  top: calc(100% + var(--tt-offset) + var(--tt-arrow));
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}
[data-tooltip][data-tooltip-pos="bottom"]:hover::after,
[data-tooltip][data-tooltip-pos="bottom"]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* ── LEFT ───────────────────────────────────────────────────────────── */
[data-tooltip][data-tooltip-pos="left"]::before {
  border-left-color: var(--tt-bg);
  top: 50%;
  right: calc(100% + var(--tt-offset) - var(--tt-arrow));
  transform: translateY(-50%) translateX(5px);
}
[data-tooltip][data-tooltip-pos="left"]::after {
  top: 50%;
  right: calc(100% + var(--tt-offset) + var(--tt-arrow));
  transform: translateY(-50%) translateX(5px);
}
[data-tooltip][data-tooltip-pos="left"]:hover::before,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::before {
  transform: translateY(-50%) translateX(0);
}
[data-tooltip][data-tooltip-pos="left"]:hover::after,
[data-tooltip][data-tooltip-pos="left"]:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    transition: opacity var(--tt-dur) ease;
  }
}

/* ── Disabled state ─────────────────────────────────────────────────── */
[data-tooltip][disabled]::before,
[data-tooltip][disabled]::after,
[data-tooltip][aria-disabled="true"]::before,
[data-tooltip][aria-disabled="true"]::after {
  display: none;
}