/* =========================
   SMART GLOBAL TOOLTIP
========================= */

/* The bubble is a light card, matching the credit-notes tooltip that is the
   reference design. Defined once here; every info icon in the product opens it. */
:root {
    --app-tooltip-bg: #f1f0e8;
    --app-tooltip-text: #2a2820;
    /* Border and nested surface are steps down from the card, kept in the same
       warm family so nothing inside the bubble reads as a cool grey patch. */
    --app-tooltip-border: #dddbcd;
    --app-tooltip-muted: #62604f;
    /* Nested boxes inside the bubble (price panels, chips) — a step down from
       the card so they read as sub-surfaces rather than floating on it. */
    --app-tooltip-surface: #e5e3d7;
}

.app-tooltip {
    position: absolute;
    max-width: 300px !important;
    background-color: var(--app-tooltip-bg) !important;
    color: var(--app-tooltip-text);
    border-radius: 8px;
    border: 1px solid var(--app-tooltip-border);
    box-shadow: 0 6px 20px rgba(16, 24, 40, 0.14), 0 1px 3px rgba(16, 24, 40, 0.08);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    z-index: 9999;
    transition: opacity 0.18s ease, transform 0.18s ease;
    opacity: 0;
    transform: translateY(6px);
    /* Tooltips carry file names, IDs and reference codes, which have no spaces to wrap
       at and would otherwise spill outside the box instead of breaking at max-width. */
    overflow-wrap: break-word;
}

.app-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* CARET — two layers so the 1px card border carries through the point. */
.app-tooltip::before,
.app-tooltip::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

/* Caret Top */
.app-tooltip[data-position="bottom"]::before {
    top: -8px;
    border-bottom: 8px solid var(--app-tooltip-border);
    left: var(--arrow-left, 30px);
}

.app-tooltip[data-position="bottom"]::after {
    top: -7px;
    border-bottom: 8px solid var(--app-tooltip-bg);
    left: var(--arrow-left, 30px);
}

/* Caret Bottom */
.app-tooltip[data-position="top"]::before {
    bottom: -8px;
    border-top: 8px solid var(--app-tooltip-border);
    left: var(--arrow-left, 30px);
}

.app-tooltip[data-position="top"]::after {
    bottom: -7px;
    border-top: 8px solid var(--app-tooltip-bg);
    left: var(--arrow-left, 30px);
}

/* Content Styles */
.tooltip-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.tooltip-status {
    font-size: 12px;
    margin-bottom: 6px;
}

.tooltip-status.success { color: #198754; }
.tooltip-status.danger { color: #dc3545; }
.tooltip-status.warning { color: #ffc107; }
.tooltip-status.info { color: #0dcaf0; }

.tooltip-id {
    background: var(--app-tooltip-surface);
    padding: 6px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tooltip-copy {
    cursor: pointer;
    color: #0d6efd;
    font-size: 11px;
}



 
/* Per-trigger widths, set by data-tooltip-width on the icon. `lg` is for the
   long explainers that used to open their own modal. */
.app-tooltip.md { max-width: 420px !important; }
.app-tooltip.lg { max-width: 560px !important; }

/* Long explainers must not run off the screen. The cap lives on the inner body,
   not on .app-tooltip — clipping the tooltip itself would cut off the caret,
   which is positioned outside its box. */
.app-tooltip__body {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overflow-x: hidden;
}

.app-tooltip ul {
    padding-left: 18px;
    margin-bottom: 0;
}

.app-tooltip li {
    margin: 3px 0;
}

/* ---------------------------------------------------------------------------
   Content moved in from the page keeps its page classes, and those set their own
   backgrounds and colours. Flatten them to the card's own palette so a snippet
   reads the same inside a tooltip as any other tooltip content.
   --------------------------------------------------------------------------- */
.app-tooltip [class*="bg-"],
.app-tooltip [class*="bga-"],
.app-tooltip .msg,
.app-tooltip .price_bg {
    background: var(--app-tooltip-surface) !important;
    border-color: var(--app-tooltip-border) !important;
    color: var(--app-tooltip-text) !important;
}

/* Status chips and inline highlights. */
.app-tooltip .badge {
    background: var(--app-tooltip-surface) !important;
    color: var(--app-tooltip-text) !important;
    font-size: 12px !important;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Anything that set its own colour for a coloured page surface. */
.app-tooltip .priceColor,
.app-tooltip .text-dark,
.app-tooltip .text-black {
    color: var(--app-tooltip-text) !important;
}

.app-tooltip .text-muted {
    color: var(--app-tooltip-muted) !important;
}

.xl.app-tooltip {max-width: 600px !important;}

/* Both caret layers move together, or the border layer detaches from the fill. */
.xl.app-tooltip[data-position="bottom"]::before,
.xl.app-tooltip[data-position="bottom"]::after,
.xl.app-tooltip[data-position="top"]::before,
.xl.app-tooltip[data-position="top"]::after {
    left: 10px !important;
}