/* ==========================================================================
   ATOMS / tooltip / tooltip.css
   --------------------------------------------------------------------------
   Tooltip muncul via JS (tooltip.js). CSS ini hanya menangani visual.

   HTML PATTERN (dikelola JS, tapi bisa manual):
     <div class="tooltip-wrapper">
       <button data-tooltip="Hapus item ini" data-tooltip-pos="top">
         Delete
       </button>
     </div>

   Manual:
     <div class="tooltip-wrapper">
       <button>Hover me</button>
       <div class="tooltip tooltip-top" role="tooltip">Pesan tooltip</div>
     </div>
   ========================================================================== */

.tooltip-wrapper {
  position: relative;
  display:  inline-flex;
}

.tooltip {
  position:         absolute;
  z-index:          var(--z-tooltip);
  max-width:        240px;
  padding:          var(--size-200) var(--size-300);   /* 8px 12px */
  background-color: var(--gray-900);
  color:            var(--gray-50);
  font-size:        var(--text-caption-size);   /* 12px */
  font-weight:      var(--font-weight-regular);
  line-height:      var(--leading-snug);
  border-radius:    var(--radius-md);
  pointer-events:   none;
  white-space:      normal;
  word-break:       break-word;
  box-shadow:       var(--shadow-lg);

  /* Hidden by default */
  opacity:    0;
  visibility: hidden;
  transition:
    opacity    var(--duration-normal) var(--ease-default),
    visibility var(--duration-normal) var(--ease-default),
    transform  var(--duration-normal) var(--ease-out);
}

/* Dark mode — lebih terang supaya kontras */
[data-theme="dark"] .tooltip {
  background-color: var(--gray-100);
  color:            var(--gray-900);
}

/* Arrow */
.tooltip::before {
  content:  '';
  position: absolute;
  width:    0;
  height:   0;
  border:   5px solid transparent;
}

/* TOP */
.tooltip-top {
  bottom:    calc(100% + 8px);
  left:      50%;
  transform: translateX(-50%) translateY(4px);
}
.tooltip-top::before {
  top:       100%;
  left:      50%;
  transform: translateX(-50%);
  border-top-color: var(--gray-900);
}
[data-theme="dark"] .tooltip-top::before { border-top-color: var(--gray-100); }

/* BOTTOM */
.tooltip-bottom {
  top:       calc(100% + 8px);
  left:      50%;
  transform: translateX(-50%) translateY(-4px);
}
.tooltip-bottom::before {
  bottom:    100%;
  left:      50%;
  transform: translateX(-50%);
  border-bottom-color: var(--gray-900);
}
[data-theme="dark"] .tooltip-bottom::before { border-bottom-color: var(--gray-100); }

/* LEFT */
.tooltip-left {
  right:     calc(100% + 8px);
  top:       50%;
  transform: translateY(-50%) translateX(4px);
}
.tooltip-left::before {
  left:      100%;
  top:       50%;
  transform: translateY(-50%);
  border-left-color: var(--gray-900);
}
[data-theme="dark"] .tooltip-left::before { border-left-color: var(--gray-100); }

/* RIGHT */
.tooltip-right {
  left:      calc(100% + 8px);
  top:       50%;
  transform: translateY(-50%) translateX(-4px);
}
.tooltip-right::before {
  right:     100%;
  top:       50%;
  transform: translateY(-50%);
  border-right-color: var(--gray-900);
}
[data-theme="dark"] .tooltip-right::before { border-right-color: var(--gray-100); }

/* VISIBLE state — ditambah oleh JS */
.tooltip.is-visible {
  opacity:    1;
  visibility: visible;
}
.tooltip-top.is-visible    { transform: translateX(-50%) translateY(0); }
.tooltip-bottom.is-visible { transform: translateX(-50%) translateY(0); }
.tooltip-left.is-visible   { transform: translateY(-50%) translateX(0); }
.tooltip-right.is-visible  { transform: translateY(-50%) translateX(0); }