/* TODO: Review box-shadow values - consider using design system shadow variables (--shadow-xs, --shadow-sm, etc.) */
/**
 * Tooltip System - Quick Win #1
 * Provides helpful tooltips for all interactive elements
 */

/* Tooltip Container */
[data-tooltip] {
    position: relative;
    cursor: help;

/* Tooltip Base Styles */
[data-tooltip]::before,
[data-tooltip]::after {
    position: fixed; /* Use fixed positioning to escape parent containers */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 99999; /* Very high z-index to appear above all elements including headers */
    visibility: hidden;

/* Tooltip Arrow */
[data-tooltip]::before {
    content: '';
    border: 6px solid transparent;
    width: 0;
    height: 0;

/* Tooltip Text */
[data-tooltip]::after {
    content: attr(data-tooltip);
    background: rgba(20, 20, 30, 0.98);
    color: var(--color-text-primary)fff;
    padding: var(--spacing-sm) calc(var(--spacing-md) * 1.167);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.6), 0 0 0 1px rgba(74, 144, 226, 0.3);
    border: 2px solid var(--color-info);
    max-width: 304px;
    white-space: normal;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(var(--color-bg-primary-rgb, 26, 26, 26), 0.3);

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

/* Ensure tooltip positioning is correct on hover */
[data-tooltip]:hover::after {
    transform: translateX(-50%);

[data-tooltip-position="bottom"]:hover::after {
    transform: translateX(-50%);

[data-tooltip-position="left"]:hover::after {
    transform: translateY(-50%);

[data-tooltip-position="right"]:hover::after {
    transform: translateY(-50%);

/* Ensure tooltip appears with configurable delay for better UX */
[data-tooltip]:hover::after {
    transition-delay: var(--tooltip-delay, 100ms);

/* Disabled tooltips */
body.tooltips-disabled [data-tooltip]:hover::before,
body.tooltips-disabled [data-tooltip]:hover::after,
body.tooltips-disabled [data-tooltip]:focus::before,
body.tooltips-disabled [data-tooltip]:focus::after {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

/* Mobile touch support */
[data-tooltip].tooltip-touch-active::before,
[data-tooltip].tooltip-touch-active::after {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

/* Tooltip Positioning - Top (default) */
[data-tooltip]::after {
    bottom: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;

[data-tooltip]::before {
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--color-info);
    border-width: calc(var(--spacing-xs) * 1.75);
    margin-bottom: 0;

/* Tooltip Positioning - Bottom */
[data-tooltip-position="bottom"]::after {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%) translateY(8px);
    margin-top: calc(var(--spacing-xs) * 1.5);
    margin-bottom: 0;

[data-tooltip-position="bottom"]::before {
    top: 100%;
    bottom: auto;
    transform: translateX(-50%);
    border-top-color: transparent;
    border-bottom-color: var(--color-info);
    margin-top: 0;
    margin-bottom: 0;

/* Tooltip Positioning - Left */
[data-tooltip-position="left"]::after {
    right: 100%;
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
    margin-right: calc(var(--spacing-xs) * 1.5);
    margin-bottom: 0;

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

/* Tooltip Positioning - Right */
[data-tooltip-position="right"]::after {
    left: 100%;
    right: auto;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    margin-left: calc(var(--spacing-xs) * 1.5);
    margin-bottom: 0;

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

/* Tooltip for buttons - slightly different styling */
button[data-tooltip],
.action-btn[data-tooltip],
.roll-btn[data-tooltip] {
    cursor: pointer;

/* Tooltip for disabled elements */
[data-tooltip][disabled]::after,
[data-tooltip].disabled::after {
    content: attr(data-tooltip-disabled) attr(data-tooltip);

/* Long tooltips */
[data-tooltip].tooltip-long::after {
    white-space: normal;
    max-width: 352px;
    text-align: left;

/* Critical/Important tooltips */
[data-tooltip].tooltip-important::after {
    border-color: var(--color-failure);
    background: rgba(20, 0, 0, 0.95);

[data-tooltip].tooltip-important::before {
    border-top-color: var(--color-failure);

/* Success tooltips */
[data-tooltip].tooltip-success::after {
    border-color: var(--color-success);
    background: rgba(0, 20, 0, 0.95);

[data-tooltip].tooltip-success::before {
    border-top-color: var(--color-success);

/* Mobile: Show tooltips on tap for touch devices */
@media (hover: none) and (pointer: coarse) {
    [data-tooltip]:active::before,
    [data-tooltip]:active::after {
        opacity: 1;

/* Accessibility: Show tooltips for keyboard focus */
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    opacity: 1;
    visibility: visible;

/* Ensure consistent styling across all tooltip positions */
[data-tooltip-position="bottom"]::before {
    border-width: calc(var(--spacing-xs) * 1.75);

[data-tooltip-position="left"]::before,
[data-tooltip-position="right"]::before {
    border-width: calc(var(--spacing-xs) * 1.75);

/* Better visibility for important tooltips */
[data-tooltip].tooltip-important::after {
    border-width: calc(var(--spacing-xs) / 2);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4), 0 0 0 1px rgba(255, 107, 107, 0.5);

/* Consistent tooltip appearance for buttons */
button[data-tooltip]::after,
.action-btn[data-tooltip]::after,
.roll-btn[data-tooltip]::after {
    font-weight: 500;
    border-width: calc(var(--spacing-xs) / 2);

/* Tooltip for icons - slightly smaller */
.icon[data-tooltip]::after,
[class*="icon"][data-tooltip]::after {
    font-size: 0.8125rem;
    padding: var(--spacing-xs) var(--spacing-sm);

/* ===== Add comprehensive tooltip system ===== */
/* TODO: No tooltips on interactive elements (Score: 3.0/10). Users don't understand what elements do. Add tooltips to all buttons, icons, inputs, and controls. */

/* ===== [Rework] Add comprehensive tooltip system ===== */
/* TODO: No tooltips on interactive elements (Score: 3.0/10). Users don't understand what elements do. Add tooltips to all buttons, icons, inputs, and controls.

[Note: This task was previously marked complete but needs proper implementation. Missing files: none] */

/* ===== [Rework] Add comprehensive tooltip system ===== */
/* No tooltips on interactive elements (Score: 3.0/10). Users don't understand what elements do. Add tooltips to all buttons, icons, inputs, and controls.

[Note: This task was previously marked complete */

/* UI improvements: Add Tooltips Where Needed */

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}