/* AI4Sport UI Kit — Tabler-compatible icon and surface primitives. */
.ui-icon {
  display: inline-block;
  flex: 0 0 auto;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vertical-align: -0.125em;
  width: 1em;
}

.ui-icon--sm {
  font-size: 15px;
}

.ui-icon--md {
  font-size: 18px;
}

.ui-icon--lg {
  font-size: 22px;
}

.nav-icon .ui-icon {
  font-size: 18px;
  height: 18px;
  width: 18px;
}

.metric-icon .ui-icon {
  font-size: 16px;
  height: 16px;
  width: 16px;
}

.icon-button .ui-icon {
  font-size: 18px;
  height: 18px;
  width: 18px;
}

.button .ui-icon {
  font-size: 16px;
  height: 16px;
  width: 16px;
}

.team-avatar .ui-icon,
.privacy-icon .ui-icon,
.platform-icon .ui-icon {
  font-size: 16px;
  height: 16px;
  width: 16px;
}

.icon-label {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.icon-button,
.nav-item,
.button,
.task-open,
.table-action {
  -webkit-tap-highlight-color: transparent;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  background: #17243a;
  border-radius: 7px;
  color: #fff;
  content: attr(data-tooltip);
  font-size: 11px;
  font-weight: 700;
  left: 50%;
  line-height: 1.2;
  opacity: 0;
  padding: 6px 8px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 8px);
  transform: translate(-50%, -3px);
  transition: opacity 140ms ease, transform 140ms ease;
  white-space: nowrap;
  z-index: 20;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.surface-card[data-tone="blue"] {
  background: linear-gradient(135deg, #fff, #f5f9ff);
  border-color: #dce9ff;
}

.surface-card[data-tone="cyan"] {
  background: linear-gradient(135deg, #fff, #f2fcff);
  border-color: #d9f0f5;
}

.surface-card[data-tone="dark"] {
  background: linear-gradient(145deg, #17243a, #263b5d);
  border-color: #314a72;
  color: #fff;
}

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