/* ─────────────────────────────────────────────────────────────────────────
   Site-wide overrides. Perfex loads this file automatically after style.css
   (application/helpers/assets_helper.php), so it survives a CRM upgrade in a
   way that editing style.css does not.

   TOOLTIPS / POPOVERS
   -------------------
   main.js initialises tooltips as a *delegated* handler with no `container`:

       $("body").tooltip({ selector: '[data-toggle="tooltip"]' });

   Bootstrap 3 then inserts the tip inline - `$tip.insertAfter($element)` -
   so a tooltip on an icon inside a <td>, <li> or <label> becomes a CHILD of
   that element and inherits from it.

   That matters because several views pin text colour with
   `-webkit-text-fill-color` to defeat a dark-mode stylesheet. Unlike most
   colour declarations that property is inherited AND it beats `color` when
   painting text. Bootstrap gives .tooltip-inner `color:#fff` but never sets
   a fill colour, so the tip silently inherited the host cell's dark fill and
   rendered dark-on-dark (#1f2d3d) - present, but unreadable.

   The fix is to make the tooltip and popover state their own colours
   outright, including the fill colour, so they can never inherit one. This
   is deliberately global: any tooltip on any page can land inside a coloured
   container, so pinning it per-view would only paper over one instance.
   ───────────────────────────────────────────────────────────────────────── */

.tooltip,
.tooltip > .tooltip-inner {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.tooltip > .tooltip-inner {
    background-color: #1f2d3d !important;
}

/* Perfex recolours the tip body but leaves the arrows at Bootstrap's #000,
   which reads as a black notch on the navy bubble. Match them up. */
.tooltip.top    > .tooltip-arrow,
.tooltip.top-left  > .tooltip-arrow,
.tooltip.top-right > .tooltip-arrow    { border-top-color: #1f2d3d !important; }
.tooltip.bottom > .tooltip-arrow,
.tooltip.bottom-left  > .tooltip-arrow,
.tooltip.bottom-right > .tooltip-arrow { border-bottom-color: #1f2d3d !important; }
.tooltip.left   > .tooltip-arrow       { border-left-color: #1f2d3d !important; }
.tooltip.right  > .tooltip-arrow       { border-right-color: #1f2d3d !important; }

/* Popovers are inserted inline by the same delegated init. Bootstrap gives
   them a white background but no colour at all, so they inherit - the same
   trap, with the contrast the other way round (white text on white). */
.popover,
.popover .popover-title,
.popover .popover-content {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
}