/**
 * Tooltip Components
 * Contextual help tooltips with positioning
 * Implements specifications from TECHTRONIC_DESIGN_SYSTEM.md Section 7.8
 *
 * @package Techtronic_Learning
 * @since 1.0.0
 */

/* ==========================================================================
   Tooltip Container
   ========================================================================== */

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

/* ==========================================================================
   Tooltip Content
   ========================================================================== */

.tooltip__content {
	/* Position */
	position: absolute;
	z-index: 1000;

	/* Size */
	max-width: 280px;
	padding: 8px 12px;

	/* Appearance */
	background: var(--surface-4);
	border: 1px solid var(--gray-600);
	border-radius: 6px;
	box-shadow: var(--shadow-lg);

	/* Typography */
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--gray-100);
	text-align: left;

	/* Text wrapping */
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: break-word;

	/* Initial state */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	/* Transition */
	transition: all 0.2s ease;
}

/* Show tooltip on hover */
.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content,
.tooltip--active .tooltip__content {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Tooltip Arrow
   ========================================================================== */

.tooltip__content::after {
	content: '';
	position: absolute;
	border: 6px solid transparent;
}

/* ==========================================================================
   Tooltip Positions
   ========================================================================== */

/* Top */
.tooltip__content--top {
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
}

.tooltip__content--top::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-top-color: var(--surface-4);
}

.tooltip:hover .tooltip__content--top,
.tooltip:focus-within .tooltip__content--top,
.tooltip--active .tooltip__content--top {
	transform: translateX(-50%) translateY(0);
}

/* Bottom */
.tooltip__content--bottom {
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
}

.tooltip__content--bottom::after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: var(--surface-4);
}

.tooltip:hover .tooltip__content--bottom,
.tooltip:focus-within .tooltip__content--bottom,
.tooltip--active .tooltip__content--bottom {
	transform: translateX(-50%) translateY(0);
}

/* Left */
.tooltip__content--left {
	right: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
}

.tooltip__content--left::after {
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-left-color: var(--surface-4);
}

.tooltip:hover .tooltip__content--left,
.tooltip:focus-within .tooltip__content--left,
.tooltip--active .tooltip__content--left {
	transform: translateY(-50%) translateX(0);
}

/* Right */
.tooltip__content--right {
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
}

.tooltip__content--right::after {
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-right-color: var(--surface-4);
}

.tooltip:hover .tooltip__content--right,
.tooltip:focus-within .tooltip__content--right,
.tooltip--active .tooltip__content--right {
	transform: translateY(-50%) translateX(0);
}

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

.tooltip__content--small {
	max-width: 200px;
	padding: 6px 10px;
	font-size: 12px;
}

.tooltip__content--large {
	max-width: 360px;
	padding: 12px 16px;
	font-size: 15px;
}

/* ==========================================================================
   Tooltip Variants
   ========================================================================== */

/* Light tooltip (on dark background) */
.tooltip__content--light {
	background: var(--surface-light-0);
	border-color: var(--gray-300);
	color: var(--gray-900);
}

.tooltip__content--light.tooltip__content--top::after {
	border-top-color: var(--surface-light-0);
}

.tooltip__content--light.tooltip__content--bottom::after {
	border-bottom-color: var(--surface-light-0);
}

.tooltip__content--light.tooltip__content--left::after {
	border-left-color: var(--surface-light-0);
}

.tooltip__content--light.tooltip__content--right::after {
	border-right-color: var(--surface-light-0);
}

/* Success tooltip */
.tooltip__content--success {
	background: var(--success-600);
	border-color: var(--success-700);
	color: #ffffff;
}

.tooltip__content--success.tooltip__content--top::after {
	border-top-color: var(--success-600);
}

.tooltip__content--success.tooltip__content--bottom::after {
	border-bottom-color: var(--success-600);
}

.tooltip__content--success.tooltip__content--left::after {
	border-left-color: var(--success-600);
}

.tooltip__content--success.tooltip__content--right::after {
	border-right-color: var(--success-600);
}

/* Error tooltip */
.tooltip__content--error {
	background: var(--error-600);
	border-color: var(--error-700);
	color: #ffffff;
}

.tooltip__content--error.tooltip__content--top::after {
	border-top-color: var(--error-600);
}

.tooltip__content--error.tooltip__content--bottom::after {
	border-bottom-color: var(--error-600);
}

.tooltip__content--error.tooltip__content--left::after {
	border-left-color: var(--error-600);
}

.tooltip__content--error.tooltip__content--right::after {
	border-right-color: var(--error-600);
}

/* Warning tooltip */
.tooltip__content--warning {
	background: var(--warning-600);
	border-color: var(--warning-700);
	color: #ffffff;
}

.tooltip__content--warning.tooltip__content--top::after {
	border-top-color: var(--warning-600);
}

.tooltip__content--warning.tooltip__content--bottom::after {
	border-bottom-color: var(--warning-600);
}

.tooltip__content--warning.tooltip__content--left::after {
	border-left-color: var(--warning-600);
}

.tooltip__content--warning.tooltip__content--right::after {
	border-right-color: var(--warning-600);
}

/* Info tooltip */
.tooltip__content--info {
	background: var(--info-600);
	border-color: var(--info-700);
	color: #ffffff;
}

.tooltip__content--info.tooltip__content--top::after {
	border-top-color: var(--info-600);
}

.tooltip__content--info.tooltip__content--bottom::after {
	border-bottom-color: var(--info-600);
}

.tooltip__content--info.tooltip__content--left::after {
	border-left-color: var(--info-600);
}

.tooltip__content--info.tooltip__content--right::after {
	border-right-color: var(--info-600);
}

/* ==========================================================================
   Tooltip with Icon
   ========================================================================== */

.tooltip__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gray-600);
	color: var(--gray-200);
	font-size: 12px;
	font-weight: 600;
	cursor: help;
	transition: all 0.2s ease;
	border: none;
	padding: 0;
}

.tooltip__trigger:hover {
	background: var(--gray-500);
	color: var(--gray-50);
}

.tooltip__trigger svg {
	width: 12px;
	height: 12px;
}

/* ==========================================================================
   Tooltip Delay
   ========================================================================== */

.tooltip--delay .tooltip__content {
	transition-delay: 0.5s;
}

.tooltip--delay:hover .tooltip__content,
.tooltip--delay:focus-within .tooltip__content {
	transition-delay: 0s;
}

/* ==========================================================================
   Tooltip No Arrow
   ========================================================================== */

.tooltip__content--no-arrow::after {
	display: none;
}

/* ==========================================================================
   Interactive Tooltip (can click inside)
   ========================================================================== */

.tooltip--interactive .tooltip__content {
	pointer-events: auto;
}

.tooltip--interactive .tooltip__content:hover {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	.tooltip__content {
		max-width: 240px;
		font-size: 13px;
	}

	.tooltip__content--large {
		max-width: 280px;
	}

	/* On mobile, prefer bottom placement to avoid viewport issues */
	.tooltip__content--top {
		bottom: auto;
		top: calc(100% + 8px);
		transform: translateX(-50%) translateY(-4px);
	}

	.tooltip__content--top::after {
		top: auto;
		bottom: 100%;
		border-top-color: transparent;
		border-bottom-color: var(--surface-4);
	}

	.tooltip:hover .tooltip__content--top,
	.tooltip:focus-within .tooltip__content--top {
		transform: translateX(-50%) translateY(0);
	}
}

/* ==========================================================================
   Accessible Tooltips
   ========================================================================== */

/* Ensure tooltips work with keyboard focus */
[data-tooltip]:focus .tooltip__content,
button[data-tooltip]:focus + .tooltip__content {
	opacity: 1;
	visibility: visible;
}

/* ARIA live region for screen readers */
.tooltip__content[role="tooltip"] {
	/* Announced by screen readers when visible */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.tooltip__content {
		position: static;
		opacity: 1;
		visibility: visible;
		display: inline;
		max-width: none;
		background: none;
		border: none;
		box-shadow: none;
		padding: 0;
		color: #000;
	}

	.tooltip__content::after {
		display: none;
	}

	.tooltip__content::before {
		content: ' (';
	}

	.tooltip__content::after {
		content: ')';
	}

	.tooltip__trigger {
		display: none;
	}
}