/*
 * Tippy.js "lasso" theme — light canvas.
 *
 * The tooltips in this app contain rich HTML authored against a WHITE
 * background (tables, coloured badges, status pills). A dark Tippy theme
 * makes that content unreadable. We use a near-white canvas so the inner
 * HTML renders as the author intended, with just enough chrome (thin
 * border + soft shadow) to read as a popover.
 */

.tippy-box[data-theme~='lasso'] {
    background-color: #ffffff;
    color: #333333;
    font-family: Verdana, sans-serif;
    font-size: 13px;
    line-height: 18px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    max-width: 320px;
}

.tippy-box[data-theme~='lasso'] .tippy-content {
    padding: 8px 12px;
    word-wrap: break-word;
    /* If the inner content is taller than the viewport allows, scroll
       instead of clipping the bottom. Tippy's flip/shift modifiers also
       help keep the box on-screen. */
    max-height: 70vh;
    overflow-y: auto;
}

/* Arrow colour matches the background; the ::after sliver picks up the border. */
.tippy-box[data-theme~='lasso'][data-placement^='top']    > .tippy-arrow::before { border-top-color:    #ffffff; }
.tippy-box[data-theme~='lasso'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #ffffff; }
.tippy-box[data-theme~='lasso'][data-placement^='left']   > .tippy-arrow::before { border-left-color:   #ffffff; }
.tippy-box[data-theme~='lasso'][data-placement^='right']  > .tippy-arrow::before { border-right-color:  #ffffff; }

/* A thin tinted line on the arrow to match the box's border. */
.tippy-box[data-theme~='lasso'] > .tippy-arrow::after {
    content: '';
    position: absolute;
    border-color: transparent;
    border-style: solid;
}
.tippy-box[data-theme~='lasso'][data-placement^='top']    > .tippy-arrow::after { top:    1px; border-width: 7px 7px 0;  border-top-color:    #c8c8c8; left: 1px; }
.tippy-box[data-theme~='lasso'][data-placement^='bottom'] > .tippy-arrow::after { bottom: 1px; border-width: 0 7px 7px;  border-bottom-color: #c8c8c8; left: 1px; }
.tippy-box[data-theme~='lasso'][data-placement^='left']   > .tippy-arrow::after { left:   1px; border-width: 7px 0 7px 7px; border-left-color:   #c8c8c8; top: 1px; }
.tippy-box[data-theme~='lasso'][data-placement^='right']  > .tippy-arrow::after { right:  1px; border-width: 7px 7px 7px 0; border-right-color:  #c8c8c8; top: 1px; }