/* tooltip.css — replaces prototip.css
 *
 * Structure per tooltip:
 *   .ump-tip-outer.{variant}   — absolute positioner (no visual styles)
 *     .ump-tip-arrow           — rotated square; sits outside the box so it is
 *                                not clipped; positioned by tooltip-init.js
 *     .ump-tip                 — visual box: overflow:hidden gives identical
 *                                rounding on all four corners
 *       .ump-tip-toolbar       — colored header (click tooltips only)
 *       .ump-tip-content       — white body
 */

/* ── Positioner ─────────────────────────────────────────────── */
.ump-tip-outer {
    position: absolute;
    z-index: 9999;
    font: 11px Arial, Helvetica, sans-serif;
}

/* ── Arrow — rotated square ──────────────────────────────────── */
/*
 * Only the two outward-facing CSS border sides are colored (set by JS).
 * The two inward-facing sides are border:0, preventing colored notch lines
 * inside the box.  The arrow's fill matches the box surface it overlaps,
 * covering the box border and making the arrow appear continuous with it.
 * The arrow element is placed AFTER .ump-tip in DOM so it paints on top.
 */
.ump-tip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    /* border sides and background set by tooltip-init.js at show-time */
}

/* ── Visual box ─────────────────────────────────────────────── */
.ump-tip {
    position: relative;      /* same stacking level as arrow; DOM order makes
                                .ump-tip paint on top and hide the inner half   */
    overflow: hidden;        /* clips toolbar/content to border-radius */
    border-radius: 6px;      /* identical on all four corners        */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    width: 220px;
}

/* ── Toolbar (click tooltips only) ──────────────────────────── */
.ump-tip-toolbar {
    overflow: hidden;
    padding: 5px 7px 4px;
}

.ump-tip-title {
    float: left;
    font-weight: bold;
}

.ump-tip-close {
    float: right;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    border: 0;
}

.ump-tip-close:visited,
.ump-tip-close:hover { text-decoration:none; }

/* ── Content area ───────────────────────────────────────────── */
.ump-tip-content {
    clear: both;
    padding: 7px 9px;
    line-height: 1.4;
    color: #555;
    background: #fff;
}

/* ── orangetip / R / L / T  (hover AJAX tooltips) ───────────── */
.ump-tip-outer.orangetip .ump-tip,
.ump-tip-outer.orangetipR .ump-tip,
.ump-tip-outer.orangetipL .ump-tip,
.ump-tip-outer.orangetipT .ump-tip {
    border: 2px solid #d97A23;
}

.ump-tip-outer.orangetip .ump-tip-content,
.ump-tip-outer.orangetipR .ump-tip-content,
.ump-tip-outer.orangetipL .ump-tip-content,
.ump-tip-outer.orangetipT .ump-tip-content {
    background: #fff;
}

/* ── orangetipNoImage  (static hover, no toolbar) ───────────── */
.ump-tip-outer.orangetipNoImage .ump-tip {
    border: 2px solid #d97A23;
    width: auto;
}

.ump-tip-outer.orangetipNoImage .ump-tip-content {
    background: #fff;
}

/* ── yellowtip  (warning click tooltip) ─────────────────────── */
.ump-tip-outer.yellowtip .ump-tip {
    border: 2px solid #c89000;
}

.ump-tip-outer.yellowtip .ump-tip-toolbar {
    background: #fff;
    color: #fff;
}

.ump-tip-outer.yellowtip .ump-tip-content {
    background: #fff;
}

/* ── redtip  (error click tooltip) ──────────────────────────── */
.ump-tip-outer.redtip .ump-tip {
    border: 2px solid #b82000;
}

.ump-tip-outer.redtip .ump-tip-toolbar {
    background: #b82000;
    color: #fff;
}

.ump-tip-outer.redtip .ump-tip-content {
    background: #fff5f5;
}