/* =============================================================================
   Help popover (Bazaar's replacement for Bootstrap 4's default popover look)
   =============================================================================
   Bootstrap ships a white, 276px-wide popover that looks too narrow/dark for
   multi-line help text. These overrides widen it to 700px and repaint shell,
   body and arrow in a pastel blue so the panel reads as "informational".

   Scope: all rules target .help-popover-panel, a marker class added via the
   popover template in helpPopover.js. Without that class the default
   Bootstrap popover look is left untouched, so this file does not leak into
   other popovers in the app even though it is loaded globally.

   Markup contract: partials/help-popover.blade.php renders the trigger.
   JS init:         public/js/components/helpPopover.js.
   ========================================================================== */


/* Outer shell: wider max-width + pastel blue background/border. */
.popover.help-popover-panel {
    max-width: 700px !important;
    background-color: #e7f3ff !important;
    border-color: #b8daff !important;
}

/* Inner body: matches shell background, slightly roomier padding. */
.popover.help-popover-panel .popover-body {
    background-color: #e7f3ff !important;
    color: #004085 !important;
    padding: .75rem 1rem !important;
}

/* Arrow border (outer triangle) matches shell border. */
.popover.help-popover-panel .arrow::before {
    border-top-color: #b8daff !important;
    border-bottom-color: #b8daff !important;
    border-right-color: #b8daff !important;
    border-left-color: #b8daff !important;
}

/* Arrow fill (inner triangle) matches shell background. */
.popover.help-popover-panel .arrow::after {
    border-top-color: #e7f3ff !important;
    border-bottom-color: #e7f3ff !important;
    border-right-color: #e7f3ff !important;
    border-left-color: #e7f3ff !important;
}

/* Trigger span next to the description. Help cursor + hover-underline signal
   that the label is interactive, not just decoration. The trigger lives inside
   the page, so we scope it under .bulkactions-page to avoid leaking. */
.bulkactions-page .help-popover-trigger {
    cursor: help;
}

.bulkactions-page .help-popover-trigger:hover {
    text-decoration: underline;
}

/* Quick-actions dropdown: flex layout pins the info-i icon to the right edge
   of each item (ml-auto on the trigger) and `gap` keeps a consistent space
   between the leading FA icon and the label, since flex collapses the
   whitespace text node that normally provided that breathing room. */
.dropdown-menu[aria-labelledby="quickActions"] .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}