/* ============================================================
 * NextGen MIS — Tooltip layer (data-ng-tooltip)
 * ------------------------------------------------------------
 * Global, attribute-driven hover/focus tooltip. Any control
 * carrying `data-ng-tooltip="Label"` shows a small dark chip
 * ABOVE it on hover / keyboard focus, with an arrow.
 *
 * RENDERED AS A FLOATING ELEMENT, NOT A PSEUDO-ELEMENT. A `::after`
 * chip on the control is clipped by any scrolling/overflow ancestor
 * — `.ng-tablescroll` (overflow-x:auto) cut row-action tooltips off
 * at the table's edge. So refinements.js renders ONE `.ng-tooltip`
 * element appended to <body> (position:fixed), positioned above the
 * hovered/focused control: it escapes every overflow clip and sits
 * on top. JS owns the geometry (`left`/`top`/`--ng-tip-arrow`); this
 * file owns the look.
 *
 * refinements.js also supplies the label: it finds every icon-only
 * <a>/<button> (no visible text, just an <i>), resolves a concise
 * label, and stamps `data-ng-tooltip` + an aria-label (the
 * accessible name). Author markup may set the attribute directly too.
 *
 * Distinct from `.ng-doc-action[data-tooltip]` in _doc-viewer.css,
 * a right-anchored, doc-viewer-scoped variant that predates this.
 * ============================================================ */

.ng-tooltip {
  position: fixed;
  top: 0;
  left: 0;                                /* exact px set live by refinements.js */
  z-index: var(--z-tooltip);
  max-width: 240px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-900);   /* near-black chip — white text ≈ AAA in light, stays dark in dark mode */
  color: var(--color-text-inverse);
  font-family: var(--font-family-ui);
  font-size: 12px;                        /* ~12px label per the contract */
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-sm);
  pointer-events: none;                   /* never intercepts the control's own clicks */
  opacity: 0;
  transform: translateY(2px);             /* nudged down → slides up on reveal */
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.ng-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The arrow — a small square rotated 45°, inheriting the chip colour
   (so the dark-mode override below reaches it too). `--ng-tip-arrow`
   (set by JS) keeps it pointing at the control's centre even when the
   chip is clamped to the viewport edge. */
.ng-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--ng-tip-arrow, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;                       /* straddle the chip's bottom edge → lower corner points down */
  background: inherit;
  transform: rotate(45deg);
}
/* When there isn't room above, JS flips the chip below the control and
   adds this modifier; the arrow moves to the chip's top edge. */
.ng-tooltip.ng-tooltip--below::after {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -4px;
}

/* In dark mode the neutral-900 chip reads too close to dark cards; lift it to a
   clearly-raised surface step. White text on neutral-700 (#3b3a37) clears AA.
   The arrow inherits this via `background: inherit`. */
:root[data-theme="dark"] .ng-tooltip {
  background: var(--color-neutral-700);
}

/* Long help copy (e.g. `.ng-field-info` on report labels) — opt in via
   `data-ng-tooltip-wrap` on the trigger. Icon-only action chips stay
   single-line + ellipsed at 240px. `pre-line` (not `normal`) so an author
   can put a literal \n in the attribute to force a line break — the
   registration checks tooltip uses this to render one bulleted line per
   check. Attributes without newlines behave exactly as before. */
.ng-tooltip.ng-tooltip--wrap {
  max-width: 360px;
  padding: 6px 10px;
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  white-space: pre-line;
  overflow: visible;
  text-overflow: clip;
}

/* Mark-led lines (`data-ng-tooltip-marks`, built by refinements.js): each
   \n-separated line becomes a flex row led by the same `.ng-criteria__mark`
   glyph the table shows (defined in _data-display.css — check-circle /
   warning / minus), refilled below to stay visible on the dark chip. */
.ng-tooltip .ng-tooltip__line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;    /* chip base 12px +20%, rounded to the px grid */
}
/* On the near-black chip the glyph strokes alone are hard to read — back each
   glyph with a light interior fill while keeping the stroke's green/red. A
   mask clips the element AND its pseudo-elements, so the backdrop can't live
   inside the masked box: within the tooltip the mask moves to ::after (still
   currentColor — the feedback hue from _data-display.css) and ::before paints
   the chip-text-coloured shape behind it, sized to tuck under the stroke
   (check-circle ring band ≈ 9–16% of the box; warning triangle edges covered
   by the ~6%-thick stroke). The minus glyph has no interior — no backdrop. */
.ng-tooltip .ng-criteria__mark {
  position: relative;
  width: 17px;        /* table mark 14px +20% */
  height: 17px;
  background-color: transparent;
  -webkit-mask: none;
          mask: none;
}
.ng-tooltip .ng-criteria__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--ng-criteria-glyph) center / contain no-repeat;
          mask: var(--ng-criteria-glyph) center / contain no-repeat;
  /* 1px halo in the chip's text colour around every stroke of the masked
     glyph — four chained drop-shadows compound into a solid outline
     (diagonals included), lifting the hue off the dark chip. */
  filter: drop-shadow(1px 0 0 var(--color-text-inverse))
          drop-shadow(-1px 0 0 var(--color-text-inverse))
          drop-shadow(0 1px 0 var(--color-text-inverse))
          drop-shadow(0 -1px 0 var(--color-text-inverse));
}
.ng-tooltip .ng-criteria__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-text-inverse);
}
.ng-tooltip .ng-criteria__mark--pass::before {
  inset: 12%;
  border-radius: 50%;
}
.ng-tooltip .ng-criteria__mark--fail::before {
  clip-path: polygon(50% 20%, 85% 84%, 15% 84%);
}
.ng-tooltip .ng-criteria__mark--unknown::before {
  display: none;
}
/* No interior to back-fill, and its faint grey vanishes on the dark chip —
   render the minus in the chip's text colour. */
.ng-tooltip .ng-criteria__mark--unknown {
  color: var(--color-text-inverse);
}

@media (prefers-reduced-motion: reduce) {
  .ng-tooltip { transition: none; }
}
