/**
 * ===================================
 * GunCult UI Kit - Tooltips
 * ===================================
 * 
 * CSS-only tooltips (без JavaScript)
 */

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

/* Повышаем z-index при hover чтобы tooltip был поверх соседних элементов */
[data-tooltip]:hover,
[data-tooltip]:focus {
    z-index: 10000;
}

/* Tooltip content */
[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 9999;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 500;
    border-radius: var(--radius-md);
    white-space: nowrap;
    max-width: none;
    text-align: center;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Transition */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Tooltip arrow */
[data-tooltip]::after {
    content: '';
    position: absolute;
    z-index: 9999;
    width: 0;
    height: 0;
    border-style: solid;
    
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /* Transition */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Show tooltip on hover/focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;
}

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

[data-tooltip]:not([data-tooltip-pos])::before,
[data-tooltip][data-tooltip-pos="top"]::before {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
}

[data-tooltip]:not([data-tooltip-pos]):hover::before,
[data-tooltip][data-tooltip-pos="top"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip]:not([data-tooltip-pos])::after,
[data-tooltip][data-tooltip-pos="top"]::after {
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

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

[data-tooltip][data-tooltip-pos="bottom"]::before {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip][data-tooltip-pos="bottom"]:hover::before {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip][data-tooltip-pos="bottom"]::after {
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
}

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

[data-tooltip][data-tooltip-pos="left"]::before {
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip][data-tooltip-pos="left"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip][data-tooltip-pos="left"]::after {
    right: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.9);
}

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

[data-tooltip][data-tooltip-pos="right"]::before {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip][data-tooltip-pos="right"]:hover::before {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip][data-tooltip-pos="right"]::after {
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 6px 6px 0;
    border-color: transparent rgba(0, 0, 0, 0.9) transparent transparent;
}

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

[data-tooltip][data-tooltip-variant="primary"]::before {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

[data-tooltip][data-tooltip-variant="primary"][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-variant="primary"]:not([data-tooltip-pos])::after {
    border-top-color: var(--accent-primary);
}

[data-tooltip][data-tooltip-variant="primary"][data-tooltip-pos="bottom"]::after {
    border-bottom-color: var(--accent-primary);
}

[data-tooltip][data-tooltip-variant="primary"][data-tooltip-pos="left"]::after {
    border-left-color: var(--accent-primary);
}

[data-tooltip][data-tooltip-variant="primary"][data-tooltip-pos="right"]::after {
    border-right-color: var(--accent-primary);
}

[data-tooltip][data-tooltip-variant="success"]::before {
    background: #10b981;
}

[data-tooltip][data-tooltip-variant="success"][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-variant="success"]:not([data-tooltip-pos])::after {
    border-top-color: #10b981;
}

[data-tooltip][data-tooltip-variant="success"][data-tooltip-pos="bottom"]::after {
    border-bottom-color: #10b981;
}

[data-tooltip][data-tooltip-variant="success"][data-tooltip-pos="left"]::after {
    border-left-color: #10b981;
}

[data-tooltip][data-tooltip-variant="success"][data-tooltip-pos="right"]::after {
    border-right-color: #10b981;
}

[data-tooltip][data-tooltip-variant="warning"]::before {
    background: #f59e0b;
}

[data-tooltip][data-tooltip-variant="warning"][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-variant="warning"]:not([data-tooltip-pos])::after {
    border-top-color: #f59e0b;
}

[data-tooltip][data-tooltip-variant="warning"][data-tooltip-pos="bottom"]::after {
    border-bottom-color: #f59e0b;
}

[data-tooltip][data-tooltip-variant="warning"][data-tooltip-pos="left"]::after {
    border-left-color: #f59e0b;
}

[data-tooltip][data-tooltip-variant="warning"][data-tooltip-pos="right"]::after {
    border-right-color: #f59e0b;
}

[data-tooltip][data-tooltip-variant="danger"]::before {
    background: #ef4444;
}

[data-tooltip][data-tooltip-variant="danger"][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-variant="danger"]:not([data-tooltip-pos])::after {
    border-top-color: #ef4444;
}

[data-tooltip][data-tooltip-variant="danger"][data-tooltip-pos="bottom"]::after {
    border-bottom-color: #ef4444;
}

[data-tooltip][data-tooltip-variant="danger"][data-tooltip-pos="left"]::after {
    border-left-color: #ef4444;
}

[data-tooltip][data-tooltip-variant="danger"][data-tooltip-pos="right"]::after {
    border-right-color: #ef4444;
}

/* ===================================
   Light Variant
   =================================== */

[data-tooltip][data-tooltip-variant="light"]::before {
    background: white;
    color: #1f2937;
    box-shadow: var(--shadow-md);
}

[data-tooltip][data-tooltip-variant="light"][data-tooltip-pos="top"]::after,
[data-tooltip][data-tooltip-variant="light"]:not([data-tooltip-pos])::after {
    border-top-color: white;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

[data-tooltip][data-tooltip-variant="light"][data-tooltip-pos="bottom"]::after {
    border-bottom-color: white;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}

[data-tooltip][data-tooltip-variant="light"][data-tooltip-pos="left"]::after {
    border-left-color: white;
    filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
}

[data-tooltip][data-tooltip-variant="light"][data-tooltip-pos="right"]::after {
    border-right-color: white;
    filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
}

/* ===================================
   Sizes
   =================================== */

[data-tooltip][data-tooltip-size="sm"]::before {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

[data-tooltip][data-tooltip-size="lg"]::before {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    max-width: 300px;
}

/* ===================================
   Multiline Tooltips
   =================================== */

[data-tooltip][data-tooltip-multiline]::before {
    white-space: normal;
    text-align: left;
    min-width: 200px;
    max-width: 300px;
}

/* ===================================
   Always Visible (for debugging)
   =================================== */

[data-tooltip][data-tooltip-visible]::before,
[data-tooltip][data-tooltip-visible]::after {
    opacity: 1;
    visibility: visible;
}

/* ===================================
   Disable Animation
   =================================== */

@media (prefers-reduced-motion: reduce) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        transition: none;
    }
}

/* ===================================
   Tooltip Class-based (alternative)
   =================================== */

.gc-tooltip {
    position: relative;
    display: inline-block;
}

.gc-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 9999;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.8125rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gc-tooltip:hover .gc-tooltip-text,
.gc-tooltip:focus .gc-tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Example HTML - Attribute-based:
<button class="gc-btn gc-btn-primary" 
        data-tooltip="This is a helpful tooltip"
        data-tooltip-pos="top">
    Hover me
</button>

<span data-tooltip="Success!" 
      data-tooltip-variant="success" 
      data-tooltip-pos="right">
    ✓
</span>

Example - Class-based:
<div class="gc-tooltip">
    <button class="gc-btn gc-btn-primary">Hover me</button>
    <span class="gc-tooltip-text">This is a tooltip</span>
</div>
*/