/* #22 note: colors below are intentionally hardcoded, not design tokens.
 * This tooltip recreates vanilla Minecraft's own enchanted-item tooltip
 * chrome (dark purple panel, white/gray/gold text) — that look is part of
 * the game's UI being referenced, not this app's chrome, so it must stay
 * identical in both light and dark app themes rather than following
 * tokens.css. */
.item-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  background: rgba(16, 0, 32, 0.94);
  border: 1px solid #7b3fbf;
  box-shadow: 0 0 0 2px rgba(30, 0, 60, 0.6);
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #aaaaaa;
  z-index: 3000;
  min-width: 160px;
  max-width: min(260px, calc(100vw - 16px));
  pointer-events: auto;
}

/* Used when there isn't enough room above the slot (see ItemTooltip.js)
   — the anchor point becomes the tooltip's top-center instead of its
   bottom-center. */
.item-tooltip--below {
  transform: translate(-50%, 0);
}

.item-tooltip__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.item-tooltip__name {
  color: #ffffff;
  font-weight: 600;
}

.item-tooltip__enchant {
  color: #aaaaaa;
}

.item-tooltip__hr {
  border: none;
  border-top: 1px solid #4a2a70;
  margin: 6px 0;
}

.item-tooltip__trim-heading {
  color: #ffaa00;
}

.item-tooltip__trim-line {
  color: #aaaaaa;
  padding-left: 8px;
}

.item-tooltip__trim-material {
  color: #ff5555;
}

.item-tooltip__unbreakable {
  color: #5555ff;
  margin-top: 4px;
}

.item-tooltip__lore {
  color: #aaaaaa;
  font-style: italic;
  margin-top: 4px;
}

.item-tooltip__id {
  color: #6a6a6a;
  margin-top: 6px;
  font-size: 11px;
}

.item-tooltip__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #4a2a70;
}

.item-tooltip__action-btn {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.item-tooltip__action-btn--edit {
  background: var(--accent-teal);
  color: var(--bg-base);
}
.item-tooltip__action-btn--edit:hover {
  background: var(--accent-teal-bright);
}

.item-tooltip__action-btn--delete {
  background: transparent;
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}
.item-tooltip__action-btn--delete:hover {
  background: rgba(193, 92, 74, 0.15);
}