/* =====================================================
   Tooltip — pure CSS, no JS interop
   - Hover (desktop) and focus-within (keyboard) only
   - No tap-to-show on touch devices: @media (hover: hover) gate prevents
     the sticky-tooltip bug found in the audit
   - Token-driven: only --gs-* tokens
   ===================================================== */

.gs-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gs-tooltip__trigger {
    display: inline-flex;
}

.gs-tooltip__bubble {
    position: absolute;
    z-index: var(--gs-z-tooltip, 1060);
    pointer-events: none;
    opacity: 0;
    transform: translate(0, 0) scale(0.97);
    transition:
        opacity 120ms ease,
        transform 120ms ease;
    transition-delay: 0ms;

    background: var(--gs-text);
    color: var(--gs-text-inverse);
    border-radius: var(--gs-radius-sm);
    padding: var(--gs-space-2) var(--gs-space-3);
    font-family: var(--gs-font-sans);
    font-size: var(--gs-text-sm);
    font-weight: 500;
    line-height: 1.3;
    /* Dar tetikleyici (ör. tablo hücresindeki ikon butonu) containing block olunca
       shrink-to-fit genişlik ~0px’a inebiliyor; metin harf harf kırılıyordu. */
    width: max-content;
    max-width: min(240px, 90vw);
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
    box-sizing: border-box;
    box-shadow: var(--gs-shadow-md);
}

/* -- arrow -- */
.gs-tooltip__bubble::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gs-text);
    transform: rotate(45deg);
}

/* -- placements -- */
.gs-tooltip[data-placement="top"] .gs-tooltip__bubble {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.97);
}

.gs-tooltip[data-placement="top"] .gs-tooltip__bubble::after {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.gs-tooltip[data-placement="bottom"] .gs-tooltip__bubble {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px) scale(0.97);
}

.gs-tooltip[data-placement="bottom"] .gs-tooltip__bubble::after {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.gs-tooltip[data-placement="left"] .gs-tooltip__bubble {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px) scale(0.97);
}

.gs-tooltip[data-placement="left"] .gs-tooltip__bubble::after {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.gs-tooltip[data-placement="right"] .gs-tooltip__bubble {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px) scale(0.97);
}

.gs-tooltip[data-placement="right"] .gs-tooltip__bubble::after {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* -- show on hover (desktop only) -- */
@media (hover: hover) and (pointer: fine) {
    .gs-tooltip:hover .gs-tooltip__bubble {
        opacity: 1;
        transition-delay: var(--gs-tooltip-delay, 300ms);
    }

    .gs-tooltip[data-placement="top"]:hover .gs-tooltip__bubble {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    .gs-tooltip[data-placement="bottom"]:hover .gs-tooltip__bubble {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    .gs-tooltip[data-placement="left"]:hover .gs-tooltip__bubble {
        transform: translateY(-50%) translateX(0) scale(1);
    }
    .gs-tooltip[data-placement="right"]:hover .gs-tooltip__bubble {
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

/* -- always show on keyboard focus (so keyboard users can read it) -- */
.gs-tooltip:focus-within .gs-tooltip__bubble {
    opacity: 1;
    transition-delay: 0ms;
}

.gs-tooltip[data-placement="top"]:focus-within .gs-tooltip__bubble {
    transform: translateX(-50%) translateY(0) scale(1);
}
.gs-tooltip[data-placement="bottom"]:focus-within .gs-tooltip__bubble {
    transform: translateX(-50%) translateY(0) scale(1);
}
.gs-tooltip[data-placement="left"]:focus-within .gs-tooltip__bubble {
    transform: translateY(-50%) translateX(0) scale(1);
}
.gs-tooltip[data-placement="right"]:focus-within .gs-tooltip__bubble {
    transform: translateY(-50%) translateX(0) scale(1);
}

/* -- light theme: invert bubble for contrast -- */
[data-theme="light"] .gs-tooltip__bubble {
    background: var(--gs-text);
    color: var(--gs-text-inverse);
}

[data-theme="light"] .gs-tooltip__bubble::after {
    background: var(--gs-text);
}

/* -- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
    .gs-tooltip__bubble {
        transition: opacity 1ms;
    }
}