/* ============================================
   INFO POPOVER (InfoPopover.razor)
   Small "i" button that opens a short explanation.
   All colours come from the --bo-* design tokens in backoffice-theme.css,
   so light and dark mode follow the host theme with no overrides here.
   ============================================ */

/* MudPopover positions itself against the nearest positioned ancestor, so the
   trigger and the panel have to share one. */
.bo-info-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* The icon usually sits immediately after a label or a button, where MudIconButton's
   default padding would open a visible gap. */
.bo-info-trigger.mud-icon-button {
    padding: 2px;
    color: var(--bo-text-muted);
}

.bo-info-trigger.mud-icon-button:hover {
    color: var(--bo-text);
    background-color: var(--bo-primary-soft);
}

/* Neutralise the popover wrapper's own surface: the panel below paints it, and a
   double background shows up as a halo behind the rounded corners. */
.bo-info-popover.mud-popover {
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.bo-info-panel {
    box-sizing: border-box;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    /* Long explanations scroll inside the panel rather than running off-screen. */
    max-height: 60vh;
    overflow-y: auto;
    /* Stop a scroll that reaches the panel's end from chaining to the page, which
       would scroll the trigger away underneath the panel being read. */
    overscroll-behavior: contain;
    padding: 0.75rem 0.875rem;
    background: var(--bo-surface);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius-lg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    color: var(--bo-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    cursor: default;
}

/* For explanations that run to several paragraphs, where the default width would
   turn the panel into a narrow column of text. */
.bo-info-panel--wide {
    max-width: min(34rem, calc(100vw - 2rem));
}

.bo-info-panel-title {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--bo-text);
}

.bo-info-panel-text {
    margin: 0;
    color: var(--bo-text-muted);
}

/* Definition list for a panel that explains several terms at once. */
.bo-info-list {
    margin: 0;
}

.bo-info-list dt {
    margin-top: 0.625rem;
    font-weight: 700;
    color: var(--bo-text);
}

.bo-info-list dt:first-child {
    margin-top: 0;
}

.bo-info-list dd {
    margin: 0.125rem 0 0 0;
    color: var(--bo-text-muted);
}

/* Keeps a label and its info button on one line. */
.bo-label-with-info {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}