/* ============================================================================ */
/* public/src/components/tooltip/tooltip.css */
/* Modern glassmorphic, performant custom tooltip for cards & UI elements */
/* ============================================================================ */

.app-custom-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.96);
  transform-origin: center bottom;
  transition:
    opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.16s linear;
  max-width: min(380px, calc(100vw - 32px));
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--color-surface, #1e1e24);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  box-shadow:
    0 12px 30px -4px rgba(0, 0, 0, 0.65),
    0 0 0 1px color-mix(in srgb, var(--color-primary, #6366f1) 22%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--color-text-primary, #f3f4f6);
  font-family: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.85rem;
  line-height: 1.55;
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-custom-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.app-custom-tooltip.flip-below {
  transform-origin: center top;
}

.app-custom-tooltip-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary, #818cf8);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary, #6366f1) 25%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.app-custom-tooltip-text {
  color: var(--color-text-primary, #ffffff);
  word-break: break-word;
  white-space: pre-line;
  unicode-bidi: plaintext;
  text-align: start;
}

/* Subtle glowing accent dot */
.app-custom-tooltip-badge::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary, #818cf8);
  box-shadow: 0 0 6px var(--color-primary, #818cf8);
}

/* Mobile: disable hover tooltips safely */
@media (max-width: 640px) {
  .app-custom-tooltip {
    display: none !important;
  }
}