/* ============================================
   Tooltip System - Unified Management
   ============================================
   Usage:
     data-tooltip="text"              → tooltip content
     data-i18n-tooltip="key"          → i18n key (auto-translated on lang change)
     data-tooltip-pos="bottom"        → show below (for top-of-page buttons)
     data-tooltip-align="right"       → align right edge (for right-side buttons)
     data-tooltip-align="left"        → align left edge (for left-side buttons)
   
   Requirements:
     - Element needs position:relative (auto-applied by [data-tooltip])
     - For elements with position already set, ensure it's not static
   ============================================ */

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

/* Tooltip bubble (default: above, centered) */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    background: var(--t-bg-tooltip, #1a1a1a);
    color: var(--t-text-tooltip, #fff);
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 99999;
}

/* Show on hover */
[data-tooltip]:hover::after {
    opacity: 1;
}

/* Hide tooltip if content is empty */
[data-tooltip=""]::after,
[data-tooltip]:not([data-tooltip])::after {
    display: none;
}

/* --- Position Variants --- */

/* Below (for buttons near top of page / inside overflow:hidden containers) */
[data-tooltip-pos="bottom"][data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 6px);
}

/* --- Alignment Variants --- */

/* Right-aligned (for buttons near right edge of viewport) */
[data-tooltip-align="right"][data-tooltip]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Left-aligned (for buttons near left edge of viewport) */
[data-tooltip-align="left"][data-tooltip]::after {
    left: 0;
    right: auto;
    transform: none;
}