/* Alfogon - drop-down lists shown as a tree */
.af-tree {
    --af-tree-bg: var(--bs-body-bg, var(--body-bg, #fff));
    --af-tree-fg: var(--bs-body-color, var(--body-color, #222));
    --af-tree-line: var(--bs-border-color, #c9c4bb);
    --af-tree-accent: var(--template-link-color, var(--link-color, #a8481c));
    --af-tree-soft: color-mix(in srgb, var(--af-tree-accent) 12%, transparent);
    position: relative;
    max-width: 100%;
}
.af-tree__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(50%);
}
.af-tree__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-height: calc(1.5em + .75rem + 2px);
    cursor: pointer;
    text-align: start;
    user-select: none;
}
.af-tree--multi .af-tree__box { padding-top: .3rem; padding-bottom: .3rem; }
.af-tree.is-open .af-tree__box,
.af-tree__box:focus { outline: 0; border-color: var(--af-tree-accent); box-shadow: 0 0 0 .2rem var(--af-tree-soft); }
.af-tree__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-tree__placeholder { opacity: .6; }
.af-tree__chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .2rem .1rem .55rem;
    border-radius: 1rem;
    background: var(--af-tree-soft);
    font-size: .875em;
    line-height: 1.4;
}
.af-tree__x {
    border: 0;
    background: none;
    color: inherit;
    width: 1.3em;
    height: 1.3em;
    padding: 0;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}
.af-tree__x:hover { opacity: 1; background: var(--af-tree-accent); color: #fff; }
.af-tree__panel {
    position: absolute;
    z-index: 1060;
    inset-inline: 0;
    top: calc(100% + 2px);
    min-width: 16rem;
    padding: .5rem;
    border: 1px solid var(--af-tree-line);
    border-radius: .4rem;
    background: var(--af-tree-bg);
    color: var(--af-tree-fg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
}
.af-tree__search { margin-bottom: .4rem; }
.af-tree__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.af-tree__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .5rem .28rem calc(.5rem + var(--lvl, 0) * 1.25rem);
    border-radius: .25rem;
    cursor: pointer;
    line-height: 1.3;
}
/* the "|_" line of the old lists */
.af-tree__item.is-child::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--lvl) * 1.25rem - .55rem);
    top: 0;
    width: .55rem;
    height: 55%;
    border-inline-start: 1px solid var(--af-tree-line);
    border-bottom: 1px solid var(--af-tree-line);
}
.af-tree__item.is-parent { font-weight: 700; }
.af-tree__item.is-header { cursor: default; color: var(--af-tree-fg); }
.af-tree__item.is-header:not(.is-child) { margin-top: .25rem; }
.af-tree__item.is-active:not(.is-header) { background: var(--af-tree-soft); }
.af-tree__item.is-selected:not(.is-header) { color: var(--af-tree-accent); font-weight: 700; }
.af-tree__item.is-match .af-tree__label { text-decoration: underline; text-decoration-color: var(--af-tree-accent); text-underline-offset: .2em; }
.af-tree__check {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--af-tree-line);
    border-radius: .2rem;
    background: var(--af-tree-bg);
}
.af-tree__item.is-selected .af-tree__check {
    border-color: var(--af-tree-accent);
    background: var(--af-tree-accent) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center / 100% no-repeat;
}
.af-tree__empty { margin: .4rem .5rem; opacity: .7; font-style: italic; }