/* ============================================================================
 * ibis-ui.css  —  IbisSuite shared control theme
 * Themes Tom Select (.ibis-select) to match the chart-options panel: soft blue
 * accent (#2f6fb0), 6px radius, Segoe UI, light borders. Loaded AFTER
 * tom-select.default.min.css so these win.
 * ==========================================================================*/

/* Fixed one-line width. Applied to BOTH the Tom Select wrapper AND the raw <select>, so the box keeps
 * the same size before/after enhancement and doesn't flash wide during the cascade's partial postback
 * (when the <select> briefly reverts to native while Source/Target reload). */
.ts-wrapper.ibis-select {
    width: 200px;
    min-height: 0;
}
/* Style the RAW <select> to match the enhanced control's size + look, so during a partial postback
 * (when Tom Select is briefly torn down and the native <select> shows) the box doesn't shrink/flash. */
select.ibis-select {
    width: 200px;
    max-width: 200px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    padding: 2px 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
    vertical-align: top;
}

/* Narrow variant (e.g. the Zoom/Filter selector sitting next to the date pickers). */
.ts-wrapper.ibis-sm, select.ibis-sm {
    width: 110px;
    max-width: 110px;
}

.ts-wrapper.ibis-select .ts-control {
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    box-shadow: none;
    height: 28px; /* fixed height + overflow hidden => no second line, ever */
    min-height: 0;
    padding: 0 10px;
    align-items: center; /* vertically center the selected value */
    flex-wrap: nowrap; /* keep the value + search input on one line */
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

    .ts-wrapper.ibis-select.focus .ts-control,
    .ts-wrapper.ibis-select .ts-control:focus {
        border-color: #2f6fb0;
        box-shadow: 0 0 0 2px rgba(47, 111, 176, .15);
    }

.ts-wrapper.ibis-select.disabled .ts-control {
    background: #f1f5f9;
    color: #94a3b8;
}

.ts-wrapper.ibis-select .ts-control > input {
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    min-width: 0; /* let the input shrink instead of widening the control */
}

/* Truncate the selected value to one line with an ellipsis (full text is in the hover tooltip) */
.ts-wrapper.ibis-select.single .ts-control > .item {
    display: block;
    max-width: 100%;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-dropdown {
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    margin-top: 3px;
    overflow: hidden;
    /* The OPEN list sizes to its own text, while the CLOSED control keeps its fixed width above.
       tom-select's own stylesheet sets width:100%, which pinned the list to the control's 200px and
       forced every long option to be cut short. The panel is position:absolute (also from that
       stylesheet), so widening it moves nothing else on the page.
       min-width keeps it at least as wide as the control; the cap stops one very long value from
       stretching it across the whole window. Two max-widths on purpose: a browser without min()
       support keeps the plain vw value. */
    width: max-content;
    min-width: 100%;
    max-width: 92vw;
    max-width: min(720px, 92vw);
}

    .ts-dropdown .option {
        padding: 6px 10px;
        /* Wraps ONLY when a value is longer than the cap above - the panel is sized to its content, so
           anything shorter still sits on one line. This used to cut the text off with an ellipsis. */
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .ts-dropdown .active {
        background: #eaf2fb;
        color: #1e3a5f;
    }

    .ts-dropdown .no-results {
        padding: 6px 10px;
        color: #94a3b8;
    }

/* caret */
.ts-wrapper.single.ibis-select .ts-control:after {
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 4px 0 4px; /* match .ibis-ms-caret width (8px) */
    right: 8px; /* align with .ibis-ms-caret position */
}


/* ============================================================================
 * multi-select filter combos (.ibis-multi) — custom widget (.ibis-ms)
 * caret + checkbox list + "N selected" summary. Tom Select is NOT used here.
 * ==========================================================================*/
.ibis-ms {
    position: relative;
    display: inline-block;
    width: 200px;
    vertical-align: top;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
}

    .ibis-ms.ibis-sm {
        width: 110px;
    }

    .ibis-ms.ibis-mw {
        width: 145px;
    }

.ibis-ms-control {
    display: flex;
    align-items: center;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    background: #fff;
    padding: 0 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .ibis-ms.open .ibis-ms-control,
    .ibis-ms-control:focus {
        border-color: #2f6fb0;
        box-shadow: 0 0 0 2px rgba(47,111,176,.15);
        outline: none;
    }

.ibis-ms-summary {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ibis-ms-summary.is-placeholder {
        color: #94a3b8;
    }

/* the little dropdown arrow the users were missing */
.ibis-ms-caret {
    flex: none;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #64748b;
    transition: transform .15s, border-top-color .15s;
}

.ibis-ms.open .ibis-ms-caret {
    border-top-color: #2f6fb0;
    transform: rotate(180deg);
}

.ibis-ms-menu {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 3px);
    left: 0;
    min-width: 100%;
    width: max-content;
    /* Was capped at 320px, which is why long filter values (the OoS State list, for one) were cut off
       with an ellipsis even though the panel was free to grow. The CLOSED control is untouched: its
       width lives on .ibis-ms above. This panel is position:absolute, so widening it moves nothing.
       Two max-widths on purpose: a browser without min() support keeps the plain vw value. */
    max-width: 92vw;
    /* IBIS-FIX-MSFILTER: was min(720px, 92vw). Raised so a long value sits on ONE line - the rows
       below are now nowrap, and 720px was where they started wrapping. The 92vw guard still keeps
       the menu inside a narrow window, and ibis-ui.js pulls the menu left if its right edge would
       run off the screen. */
    max-width: min(1100px, 92vw);
    max-height: 260px;
    /* The height of the sticky filter row, so the "Select all" row can sit directly under it
       instead of on top of it. 6 + 26 + 6 padding/height + 1 border. */
    --ibis-ms-filter-h: 39px;
    overflow-y: auto;
    /* A value wider than the cap is reachable by scrolling sideways rather than by wrapping. */
    overflow-x: auto;
    background: #fff;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(16,24,40,.12);
    padding: 4px 0;
}

/* Flipped above the control. ibis-ui.js adds .up only when the menu would not fit below and there is
 * more room above — which is what happens to a dropdown low inside a short modal iframe. */
.ibis-ms.up .ibis-ms-menu {
    top: auto;
    bottom: calc(100% + 3px);
    box-shadow: 0 -6px 20px rgba(16,24,40,.12);
}

.ibis-ms-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    cursor: pointer;
    /* IBIS-FIX-MSFILTER: was white-space: normal, which wrapped any value longer than the menu's cap
       onto a second line. Every row is one line now; a value wider than the cap is reached by
       scrolling the menu sideways. */
    white-space: nowrap;
    margin: 0;
}

    .ibis-ms-opt:hover {
        background: #eaf2fb;
    }

    .ibis-ms-opt input[type="checkbox"] {
        flex: none;
        margin: 0;
        width: 15px;
        height: 15px;
        accent-color: #2f6fb0;
    }

    /* An option the server rendered as <option disabled> — greyed and not tickable. */
    .ibis-ms-opt.is-disabled {
        cursor: default;
        opacity: .55;
    }

        .ibis-ms-opt.is-disabled:hover {
            background: transparent;
        }

/* "Select all" row, shown only for a control with data-checkall="1". Sits above the options and is
 * ruled off from them so it does not read as one of the values. */
.ibis-ms-all {
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 2px;
    position: sticky;
    /* IBIS-FIX-MSFILTER: was top: 0, which put it under the filter row when the list was scrolled.
       The fallback keeps the old value on a browser without custom properties. */
    top: 0;
    top: var(--ibis-ms-filter-h, 0px);
    background: #fff;
}

    .ibis-ms-all:hover {
        background: #eaf2fb;
    }

/* The option LABEL inside the open menu (never the closed control's summary - that is
   .ibis-ms-summary above, which keeps its single-line ellipsis). Shown in full now. */
.ibis-ms-txt {
    overflow: visible;
    text-overflow: clip;
}

/* ---- IBIS-FIX-MSFILTER: the type-to-filter row pinned to the top of the open menu ----
   Sticky so it stays reachable while the list scrolls. z-index puts it over the option rows, which
   would otherwise scroll across it. */
.ibis-ms-filterrow {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.ibis-ms-filter {
    width: 100%;
    box-sizing: border-box;
    height: 26px;
    border: 1px solid #9fb0c3;
    border-radius: 5px;
    padding: 0 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
}

    .ibis-ms-filter:focus {
        border-color: #2f6fb0;
        box-shadow: 0 0 0 2px rgba(47,111,176,.15);
        outline: none;
    }

/* .ibis-ms-opt is display:flex, and a class rule outranks the browser's own [hidden]{display:none}
   - so without this the filter would mark a row hidden and the row would still be drawn. Applies to
   the "Select all" row too, which carries .ibis-ms-opt. */
.ibis-ms-opt[hidden] {
    display: none;
}

/* Shown instead of an empty menu when the typed text matches nothing. */
.ibis-ms-nohits {
    padding: 8px 10px;
    color: #94a3b8;
    font-style: italic;
    white-space: nowrap;
}

/* Native <select multiple> stays display:none while enhanced; it only shows for the
 * brief window during an AJAX teardown/re-enhance — collapse it so it doesn't flash tall. */
select.ibis-multi {
    width: 200px;
    max-width: 200px;
    height: 28px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    padding: 2px 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
    vertical-align: top;
}

/* ============================================================================
 * filter trees (.ibis-tree) — native asp:TreeView, scroll box + checkbox rows
 * ==========================================================================*/
.ibis-tree {
    width: 250px;
    height: 350px;
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    background: #fff;
    padding: 6px 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
}

    .ibis-tree a, .ibis-tree span {
        color: #334155;
        text-decoration: none;
    }

    .ibis-tree table {
        border-collapse: collapse;
    }

    .ibis-tree td {
        padding: 1px 2px;
        white-space: nowrap;
        vertical-align: middle;
    }

    .ibis-tree input[type="checkbox"] {
        accent-color: #2f6fb0;
        vertical-align: middle;
        margin: 0 5px 0 2px;
        width: 15px;
        height: 15px;
    }

    .ibis-tree img {
        vertical-align: middle;
    }

/* search text boxes (.ibis-input) — native asp:TextBox */
.ibis-input {
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    padding: 0 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
    vertical-align: top;
}

    .ibis-input:focus {
        border-color: #2f6fb0;
        box-shadow: 0 0 0 2px rgba(47,111,176,.15);
        outline: none;
    }

/* ============================================================================
 * collapsible docks (.ibis-dock) — native collapsible panel
 * ==========================================================================*/
.ibis-dock {
    margin: 0 0 10px 0;
}

.ibis-dock-card {
    border: 1px solid #a6b3c2;
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.ibis-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(#f7f9fc, #eef2f7);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 7px 7px 0 0;
}

.ibis-dock-title {
    font: 600 14px 'Segoe UI', Arial, sans-serif;
    color: #2d3a4a;
}

.ibis-dock-toggle {
    border: 0;
    background: transparent;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    position: relative;
    flex: none;
}
    /* chevron: points up when expanded, down when collapsed */
    .ibis-dock-toggle::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid #64748b;
        border-bottom: 2px solid #64748b;
        transform: translate(-50%, -30%) rotate(-135deg);
        transition: transform .15s;
    }

.ibis-dock-card.is-collapsed .ibis-dock-toggle::before {
    transform: translate(-50%, -70%) rotate(45deg);
}

.ibis-dock-body {
    padding: 10px 14px;
}

.ibis-dock-card.is-collapsed .ibis-dock-body {
    display: none;
}

.ibis-dock-card.is-collapsed .ibis-dock-head {
    border-radius: 7px;
    border-bottom-color: transparent;
}

/* ==========================================================================
 * ajax loading overlay (UpdateProgress)
 * ==========================================================================*/
.ibis-ajax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .3);
    z-index: 2000;
}

.ibis-ajax-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #9fb0c3;
    border-top-color: #2f6fb0;
    border-radius: 50%;
    animation: ibis-spin .8s linear infinite;
}

@keyframes ibis-spin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------------------------------------
   Standard app buttons (site-wide). Matches the Lines of Balance look:
   the base .ibis-btn IS the primary BLUE button. Use .ibis-btn-secondary
   (alias .ibis-btn-2) for the gray secondary action, or .ibis-btn-neutral
   for the older light button. asp:Button renders as <input>, which these
   selectors cover.
   ----------------------------------------------------------------------- */
.ibis-btn {
    display: inline-block;
    box-sizing: border-box;
    padding: 5px 14px;
    font: 600 12px "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    color: #fff;
    background: #2f6fb0;
    border: 1px solid #2a63a0;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background .15s;
    -webkit-appearance: none;
    appearance: none;
}

    .ibis-btn:hover {
        background: #2a63a0;
        color: #fff;
        text-decoration: none;
    }

    .ibis-btn:active {
        background: #255890;
    }

    .ibis-btn:focus-visible {
        outline: 2px solid #9cc3e8;
        outline-offset: 1px;
    }

    .ibis-btn:disabled,
    .ibis-btn[disabled],
    .ibis-btn.is-disabled {
        background: #a9bdd4;
        border-color: #7a92ab;
        cursor: default;
    }

    .ibis-btn + .ibis-btn {
        margin-left: 8px;
    }

/* UpdateProgress spinner */
.ibis-progress {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1f2d3d;
    background: #ffffff;
    border: 1px solid #9aabbe;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(31,45,61,.14);
}

.ibis-progress-spin {
    width: 15px;
    height: 15px;
    border: 2px solid #9aabbe;
    border-top-color: #2f6fb0;
    border-radius: 50%;
    animation: ibis-spin .7s linear infinite;
}

@keyframes ibis-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Native colour input */
.ibis-color {
    width: 44px;
    height: 26px;
    padding: 1px;
    vertical-align: middle;
    border: 1px solid #9aabbe;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

/* Date input (.ibis-date) — enhanced by flatpickr (ibis-ui.js); matches the shared control look */
.ibis-date {
    width: 98px;
    height: 28px;
    box-sizing: border-box;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    padding: 0 8px;
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    background: #fff;
    vertical-align: top;
}

    .ibis-date:focus {
        border-color: #2f6fb0;
        box-shadow: 0 0 0 2px rgba(47,111,176,.15);
        outline: none;
    }

/* flatpickr calendar popup — themed to the ibis palette (#2f6fb0 accent, 6px radius) */
.flatpickr-calendar {
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(16,24,40,.12);
    font: 13px 'Segoe UI', Arial, sans-serif;
    z-index: 100060; /* above any legacy popup/overlay */
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #2f6fb0;
    border-color: #2f6fb0;
    color: #fff;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #eaf2fb;
    border-color: #eaf2fb;
    color: #1e3a5f;
}

.flatpickr-day.today {
    border-color: #2f6fb0;
}

    .flatpickr-day.today:hover {
        background: #2f6fb0;
        color: #fff;
    }

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #2f6fb0;
}

/* Native help notification popup */
.ibis-notify {
    position: fixed;
    top: 60px;
    right: 20px;
    width: 450px;
    max-width: 92vw;
    z-index: 100000;
    background: #fff;
    border: 1px solid #9aabbe;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(31,45,61,.22);
    overflow: hidden;
}

.ibis-notify-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(#fbfcfe,#eef3f9);
    border-bottom: 1px solid #e3e9f0;
}

.ibis-notify-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2d3d;
}

.ibis-notify-close {
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
    color: #64748b;
    padding: 0 4px;
}

    .ibis-notify-close:hover {
        color: #1f2d3d;
    }

.ibis-notify-body {
    padding: 14px;
    max-height: 60vh;
    overflow: auto;
    font-size: 13px;
    color: #333;
}

/* Server-side postback buttons driven by the ECharts panel — never shown */
.ibis-srvhidden {
    display: none !important;
}

/* Shared modal dialog — used site-wide via IbisModal.open() */
.ibis-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050;
    background: rgba(31,45,61,.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ibis-modal {
    /* POSITIONED ON PURPOSE - this is what makes every popup resizable.
       makeMovableResizable() in ibis-ui.js appends the resize grip (.ibis-modal-grip) to
       this box with position:absolute; right:2px; bottom:2px. With no position declared
       here the box is static, so the grip's containing block resolved to the nearest
       positioned ancestor - .ibis-modal-overlay, which is position:fixed; inset:0 - and
       the grip rendered in the bottom-right corner of the BROWSER WINDOW instead of the
       dialog. The handle existed but was nowhere near the box, which is why the dialogs
       looked as though they could not be resized. It only jumped into place if the user
       happened to drag the dialog by its header first, because pin() sets position:fixed
       on the box at that point.
       relative, not absolute or fixed: with z-index left at auto this does NOT create a
       stacking context, so nothing inside or around the dialog re-layers. */
    position: relative;
    display: flex;
    flex-direction: column;
    width: 720px;
    max-width: 94vw;
    height: 560px;
    max-height: 90vh;
    background: #fff;
    border: 1px solid #9aabbe;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(31,45,61,.32);
    overflow: hidden;
}

.ibis-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(#fbfcfe,#eef3f9);
    border-bottom: 1px solid #e3e9f0;
    flex: 0 0 auto;
}

.ibis-modal-title {
    font-weight: 600;
    font-size: 14px;
    color: #1f2d3d;
}

.ibis-modal-close {
    text-decoration: none;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    padding: 0 4px;
}

    .ibis-modal-close:hover {
        color: #1f2d3d;
    }

.ibis-modal-body {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.ibis-modal-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Button dialogs (IbisModal.confirm / IbisModal.alert) — inline body, no iframe */
.ibis-modal-confirm {
    padding: 18px 20px;
}

.ibis-modal-msg {
    font: 13px 'Segoe UI', Arial, sans-serif;
    color: #334155;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ibis-modal-btns {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Primary is now the default look; alias kept for existing .ibis-btn-primary markup. */
.ibis-btn-primary {
    color: #fff;
    background: #2f6fb0;
    border-color: #2a63a0;
}

    .ibis-btn-primary:hover {
        background: #2a63a0;
        border-color: #2a63a0;
    }

/* Secondary / neutral gray action (Reset, Help, Cancel). Matches LOB .lob-btn-2. */
.ibis-btn-secondary,
.ibis-btn-2 {
    background: #64748b;
    border-color: #556072;
}

    .ibis-btn-secondary:hover,
    .ibis-btn-2:hover {
        background: #556072;
        border-color: #556072;
    }

    .ibis-btn-secondary:active,
    .ibis-btn-2:active {
        background: #4a5563;
    }

/* Older light/neutral button, preserved for anything that still wants it. */
.ibis-btn-neutral {
    color: #1f2d3d;
    background: linear-gradient(#ffffff, #f1f5fa);
    border-color: #9aabbe;
}

    .ibis-btn-neutral:hover {
        background: linear-gradient(#ffffff, #e6eef7);
        border-color: #7c92a9;
    }

    .ibis-btn-neutral:active {
        background: #e2e9f1;
    }

/* Loading spinner shown in an autoFit modal while its iframe page loads */
.ibis-modal-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 1;
}

    .ibis-modal-loading .ibis-progress-spin {
        width: 24px;
        height: 24px;
        border-width: 3px;
    }

/* ============================================================================
 * tree dropdowns (.ibis-treedd) — click-to-open panel wrapping a .ibis-tree
 * (the arrow toggles the tree).
 * ==========================================================================*/
.ibis-treedd {
    position: relative;
    display: inline-block;
    width: 200px;
    vertical-align: top;
    font: 13px 'Segoe UI', Arial, sans-serif;
}

.ibis-treedd-trigger {
    box-sizing: border-box;
    width: 100%;
    min-height: 28px;
    line-height: 18px;
    padding: 4px 26px 4px 8px;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ibis-treedd-trigger:after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: #64748b;
        border-bottom-width: 0;
    }

.ibis-treedd.open .ibis-treedd-trigger {
    border-color: #2f6fb0;
    box-shadow: 0 0 0 3px rgba(47,111,176,.15);
}

    .ibis-treedd.open .ibis-treedd-trigger:after {
        border-top-width: 0;
        border-bottom: 5px solid #64748b;
        margin-top: -2px;
    }

.ibis-treedd-panel {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: calc(100% + 3px);
    background: #fff;
    border: 1px solid #9fb0c3;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
    padding: 4px;
    width: max-content;
    min-width: 200px;
    /* Same cap as the other two dropdown panels, so every open dropdown on the site behaves alike.
       Two max-widths on purpose: a browser without min() support keeps the plain vw value. */
    max-width: 92vw;
    max-width: min(720px, 92vw);
    max-height: 360px;
    overflow: auto;
}

.ibis-treedd.open .ibis-treedd-panel {
    display: block;
}

.ibis-treedd-panel .ibis-tree {
    border: 0;
    box-shadow: none;
    padding: 2px 4px;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    white-space: nowrap;
}

/* Filter form: right-align field labels so they sit next to their inputs. */
.ibis-filters span[id*="Label"]:not([id$="warningLabel"]) {
    display: block;
    text-align: right;
    padding-right: 10px;
}

/* ------------------------------------------------------------------------
   Toast notifications (site-wide). Promoted here out of the per-page report
   stylesheets that each carried an identical copy, so a page only needs the
   markup + ibisNotify() and gets the styling from this file.
   Rules are verbatim from activitydetailswithcalcsummary.css.
   ---------------------------------------------------------------------- */
#ibis-toast-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ibis-toast {
    min-width: 260px;
    max-width: 400px;
    background: #2b2b2b;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    padding: 10px 14px;
    font: 13px "Segoe UI", sans-serif;
    opacity: 1;
    transition: opacity .4s ease;
}

.ibis-toast-hide {
    opacity: 0;
}

.ibis-toast-title {
    font-weight: 600;
    margin-bottom: 3px;
}