/* CSS-only tooltip system using data-tooltip attribute */

[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

/* Tooltip text bubble */
[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    margin-bottom: 8px;
    width: max-content;
    max-width: 250px;
    background: var(--tooltip-bg, var(--bg-color, #101010));
    color: var(--tooltip-text, var(--text-color, #f0f0f0));
    border: var(--ui-border-light);
    border-radius: var(--ui-radius-md);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    white-space: pre-line;
    box-shadow: var(--ui-shadow-md);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tooltip arrow */
[data-tooltip]::before {
    content: '';
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    border: 6px solid transparent;
    border-top-color: var(--border-color);
}

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

/* Position variants */

/* Bottom tooltip */
[data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 8px;
}

[data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 2px;
    border-top-color: transparent;
    border-bottom-color: var(--border-color);
}

/* Left tooltip */
[data-tooltip-position="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-right: 8px;
}

[data-tooltip-position="left"]::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-right: 2px;
    border-top-color: transparent;
    border-left-color: var(--border-color);
}

/* Right tooltip */
[data-tooltip-position="right"]::after {
    bottom: auto;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-left: 8px;
}

[data-tooltip-position="right"]::before {
    bottom: auto;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-left: 2px;
    border-top-color: transparent;
    border-right-color: var(--border-color);
}

/* Tooltip on resource rows - position to right to avoid overlap */
.stat-row[data-tooltip]::after {
    left: auto;
    right: 0;
    transform: none;
}

.stat-row[data-tooltip]::before {
    left: auto;
    right: 30px;
    transform: none;
}

/* Essence floating tooltip (appended to body, avoids overflow clipping) */
[data-essence-tip] {
    cursor: help;
}

.essence-tooltip {
    display: none;
    position: fixed;
    z-index: 10000;
    padding: 6px 10px;
    max-width: 250px;
    background: var(--tooltip-bg, var(--bg-color, #101010));
    color: var(--tooltip-text, var(--text-color, #f0f0f0));
    border: var(--ui-border-light);
    border-radius: var(--ui-radius-md);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
    white-space: pre-line;
    box-shadow: var(--ui-shadow-md);
    pointer-events: none;
}

/* Action card tooltip styling */
.action-card[data-tooltip] {
    cursor: pointer;
}

.action-card[data-tooltip]::after {
    left: 0;
    transform: none;
    max-width: 300px;
}

.action-card[data-tooltip]::before {
    left: 20px;
    transform: none;
}