/* ======================================================================
   Merged in from theme.css / theme-override.css.
   These loaded BEFORE this file did, so they sit at the top: everything
   below still overrides them, exactly as it did when they lived in the
   two old sheets.
   ====================================================================== */
/* ----- from theme.css ----- */
.popover.bs-popover-top .arrow:before, .popover.bs-popover-bottom .arrow:before, .popover.bs-popover-left .arrow:before, .popover.bs-popover-right .arrow:before {
    border: transparent; }

.popover.bs-popover-auto[x-placement^=right] {
  margin-left: 10px; }

.popover.bs-popover-auto[x-placement^=left] {
  margin-right: 10px; }

.popover.bs-popover-auto[x-placement^=top] {
  margin-bottom: 10px; }

.popover.bs-popover-auto[x-placement^=bottom] {
  margin-top: 10px; }
/* ----- from theme-override.css ----- */

.popover-body {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Popovers & Tooltips — the single owner of Bootstrap's .popover* and
   .tooltip* chrome.

   Consolidated from theme.css (vendor) and theme-override.css (app layer);
   every value here is the one that already resolved after that cascade.

   Loaded after bootstrap.min.css and theme.css. Bootstrap is earlier and
   never !important on these selectors, so plain declarations win — no
   !important survives in this file.

   Both surfaces come from the shared floating-menu tokens (--menu-bg /
   --menu-shadow and the --pop-bg derived from them, in tokens.css) so
   dropdowns,
   select2, the destination picker, popovers and tooltips all read as the
   same elevated surface. Nothing here may hardcode a panel background or
   shadow.

   The tooltip is the one surface that inverts: --tooltip-bg / --tooltip-edge
   / --tooltip-fg hold a dark slate panel in BOTH themes, because a white tip
   vanished into the white cards and navbar. Popovers follow the shared
   floating-menu tokens in both.

   Placement classes (bs-tooltip-top/-bottom/-left/-right and the
   bs-popover-* equivalents, plus the auto-placement
   [x-placement^="..."] forms) are built at runtime by Bootstrap's JS —
   they never appear as literal tokens in templates. All are live.

   The app's own anchored popover widget (.anchor-pop) is a separate
   component; see anchored-popover.css. Nothing here touches it.
   ========================================================================== */

/* --- Popover panel ------------------------------------------------------ */

.popover {
    /* Surface + edge tokens the arrow rules below reference, so a single
       popover can retheme its whole shell (body and arrow) by overriding
       just these two. --arrow-size matches Bootstrap's popover triangle. */
    --pop-bg: var(--menu-bg);
    --pop-edge: var(--border-emphasis);
    --arrow-size: .5rem;
    max-width: 240px;
    line-height: 1.7;
    background: var(--pop-bg);
    border: 1px solid var(--pop-edge);
    border-radius: 8px;
    box-shadow: var(--menu-shadow, 0 8px 24px rgba(0, 0, 0, 0.45));
}

/* Standoff from the trigger: 10px instead of Bootstrap's .5rem, on both the
   explicit and the auto-placement form. */
.popover.bs-popover-top,
.popover.bs-popover-auto[x-placement^="top"] {
    margin-bottom: 10px;
}

.popover.bs-popover-bottom,
.popover.bs-popover-auto[x-placement^="bottom"] {
    margin-top: 10px;
}

.popover.bs-popover-left,
.popover.bs-popover-auto[x-placement^="left"] {
    margin-right: 10px;
}

.popover.bs-popover-right,
.popover.bs-popover-auto[x-placement^="right"] {
    margin-left: 10px;
}

/* --- Popover arrow ------------------------------------------------------ */

/* Theme the arrow per placement; Bootstrap leaves it white otherwise. The
   fill (::after) and edge (::before) read the --pop-* vars, so each popover
   themes its own arrow. Both the explicit `.bs-popover-{dir}` class and the
   auto-placement `.bs-popover-auto[x-placement^="dir"]` form are covered.
   Position/offset stays Bootstrap's — only the width, style and the single
   coloured side are restated, so the 1px edge-behind-fill stacking is
   preserved. */
.popover.bs-popover-top > .arrow::before,
.popover.bs-popover-auto[x-placement^="top"] > .arrow::before {
    border-style: solid;
    border-width: var(--arrow-size) var(--arrow-size) 0;
    border-top-color: var(--pop-edge);
}

.popover.bs-popover-top > .arrow::after,
.popover.bs-popover-auto[x-placement^="top"] > .arrow::after {
    border-top-color: var(--pop-bg);
}

.popover.bs-popover-bottom > .arrow::before,
.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::before {
    border-style: solid;
    border-width: 0 var(--arrow-size) var(--arrow-size);
    border-bottom-color: var(--pop-edge);
}

.popover.bs-popover-bottom > .arrow::after,
.popover.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
    border-bottom-color: var(--pop-bg);
}

.popover.bs-popover-left > .arrow::before,
.popover.bs-popover-auto[x-placement^="left"] > .arrow::before {
    border-style: solid;
    border-width: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
    border-left-color: var(--pop-edge);
}

.popover.bs-popover-left > .arrow::after,
.popover.bs-popover-auto[x-placement^="left"] > .arrow::after {
    border-left-color: var(--pop-bg);
}

.popover.bs-popover-right > .arrow::before,
.popover.bs-popover-auto[x-placement^="right"] > .arrow::before {
    border-style: solid;
    border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
    border-right-color: var(--pop-edge);
}

.popover.bs-popover-right > .arrow::after,
.popover.bs-popover-auto[x-placement^="right"] > .arrow::after {
    border-right-color: var(--pop-bg);
}

/* --- Popover header & body ---------------------------------------------- */

.popover .popover-header {
    background: var(--surface-2);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-normal);
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    margin-top: 5px;
}

/* Bootstrap draws a seam line under a below-placed titled popover's arrow,
   tinted with its (default white) header bg — recolor it to the themed
   header so it doesn't flash white. */
.popover.bs-popover-bottom > .popover-header::before,
.popover.bs-popover-auto[x-placement^="bottom"] > .popover-header::before {
    border-bottom-color: var(--surface-2);
}

.popover .popover-body {
    margin-top: 5px;
    padding: 0.625rem 0.75rem;
}

.popover .popover-body p {
    font-size: 13px;
    margin-bottom: 1rem;
}