/*
 * Use this utility only for compact horizontal forms where inline errors would
 * disrupt the row layout, such as filters, toolbars, or invite bars. Wrap the
 * field element with .os-field-tooltip-error and keep the message in its
 * .invalid-feedback element. The message is absolutely positioned from the
 * wrapper, capped with a viewport-aware max-width, layered with z-index, and
 * set to pointer-events: none; standard vertical or inline forms should keep
 * regular inline errors instead.
 */
.os-field-tooltip-error {
    position: relative;
}

.os-field-tooltip-error .invalid-feedback {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0.75rem;
    display: block;
    width: max-content;
    max-width: min(18rem, calc(100vw - 4rem));
    margin-top: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: 0.5rem;
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-size: 0.75rem;
    line-height: 1.2;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.08);
    z-index: 3;
    pointer-events: none;
}

/*
 * Sticky "Add all" footer injected into Tom Select dropdowns that carry
 * data-add-all-proxy. Sits below the option list and acts as a proxy trigger
 * for the hidden form that holds the HTMX confirm wiring.
 */
.ts-add-all-footer {
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-secondary-bg);
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.ts-add-all-btn {
    display: block;
    width: 100%;
    padding: 3px 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    text-align: left;
}

.ts-add-all-btn:hover,
.ts-add-all-btn:focus-visible {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.15rem var(--bs-focus-ring-color);
}

.os-field-tooltip-error .invalid-feedback::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    bottom: calc(100% - 1px);
    width: 0.65rem;
    height: 0.65rem;
    border-top: 1px solid var(--bs-danger-border-subtle);
    border-left: 1px solid var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
    transform: rotate(45deg);
}