/*
 * ResponderHQ tooltip skin — the single source of truth for how a hover/focus
 * tooltip looks across the app, and the styling for the canonical "(i)" help
 * trigger emitted by the `info_tip` macro (templates/shared/_ui_macros.html).
 *
 * Additive & opt-in: the skin only applies to Bootstrap tooltips that request it
 * via `data-bs-custom-class="custom-tooltip"`. Tooltips that don't opt in are
 * unchanged, so this file moves zero existing pixels on its own.
 *
 * Bootstrap 5.3 themes tooltips through `--bs-tooltip-*` custom properties, so we
 * re-point those at the ResponderHQ design tokens (css/rhq_tokens.css) rather than
 * hand-overriding `.tooltip-inner`. Overriding `--bs-tooltip-bg` also recolours the
 * arrow (the arrow inherits that variable), so the whole bubble stays consistent.
 *
 * Note: ~8 existing call sites already set `data-bs-custom-class="custom-tooltip"`
 * but the class was never defined — until now they rendered as plain Bootstrap
 * defaults. Defining it here upgrades those to the branded skin automatically.
 */

.tooltip.custom-tooltip {
  --bs-tooltip-bg:            var(--rhq-text-strong, #1f2d41);   /* brand ink — softer than pure #000 */
  --bs-tooltip-color:         var(--rhq-text-on-brand, #ffffff);
  --bs-tooltip-max-width:     260px;                             /* 200px default truncates real help copy */
  --bs-tooltip-padding-x:     0.625rem;
  --bs-tooltip-padding-y:     0.4rem;
  --bs-tooltip-font-size:     0.8125rem;                         /* 13px */
  --bs-tooltip-border-radius: var(--rhq-radius, 0.375rem);
  --bs-tooltip-opacity:       1;                                 /* crisp over busy backgrounds (default 0.9 muddies text) */
}

.tooltip.custom-tooltip .tooltip-inner {
  text-align: left;                                              /* left-align multi-line help copy */
  line-height: 1.4;
  box-shadow: var(--rhq-shadow-sm, 0 1px 2px rgba(31, 45, 65, 0.06), 0 1px 3px rgba(31, 45, 65, 0.08));
}

/*
 * `.rhq-info-tip` — the inline "(i)" trigger. A muted circle-info glyph that
 * brightens to brand blue on hover/focus, with a visible focus ring for keyboard
 * users. Sized slightly under the adjacent text so it reads as a secondary cue.
 */
.rhq-info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0.25rem;
  color: var(--rhq-text-muted, #6b7686);
  cursor: help;
  line-height: 1;
  vertical-align: baseline;
  transition: color 0.12s ease-in-out;
}

.rhq-info-tip:hover,
.rhq-info-tip:focus-visible {
  color: var(--rhq-color-primary, #0061f2);
}

.rhq-info-tip:focus-visible {
  outline: 2px solid var(--rhq-focus-ring, #0061f2);
  outline-offset: 2px;
  border-radius: var(--rhq-radius-pill, 999px);
}

/* Works whether Font Awesome renders as an <i> webfont glyph or an inline <svg>. */
.rhq-info-tip > i,
.rhq-info-tip > svg {
  font-size: 0.875em;
  width: auto;
  height: 1em;
}