/* Seletor de instâncias em "pills" (ApiClient.allowed_instances e afins) —
   ver templates/partials/_instance_checklist.html */

.instance-picker-box {
    max-height: 220px;
    overflow-y: auto;
    padding: .6rem;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    border-radius: .5rem;
    background: var(--tblr-bg-surface, #fff);
}

.instance-picker-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.instance-picker-option {
    display: inline-flex;
}

.instance-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.instance-picker-label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem;
    border-radius: 50rem;
    border: 1px solid var(--tblr-border-color, #dce1e7);
    background: var(--tblr-bg-surface-secondary, #f4f6fa);
    color: var(--tblr-body-color, #1a2234);
    font-size: .8125rem;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.instance-picker-label:hover {
    border-color: var(--tblr-primary, #128C7E);
}

.instance-picker-label:active {
    transform: scale(.97);
}

.instance-picker-label::before {
    content: "";
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    border: 1.5px solid currentcolor;
    opacity: .55;
    flex: none;
}

.instance-picker-input:checked + .instance-picker-label {
    background: var(--tblr-primary, #128C7E);
    border-color: var(--tblr-primary, #128C7E);
    color: #fff;
}

.instance-picker-input:checked + .instance-picker-label::before {
    content: "\2713";
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    opacity: 1;
    font-size: .65rem;
    font-weight: 700;
}

.instance-picker-input:focus-visible + .instance-picker-label {
    outline: 2px solid var(--tblr-primary, #128C7E);
    outline-offset: 2px;
}

.instance-picker-empty {
    display: none;
}