.archive-department-popover {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .45rem);
    z-index: 20;
    display: grid;
    gap: .55rem;
    padding: .65rem;
    background: var(--archive-surface);
    border: 1px solid var(--archive-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1rem 2rem rgb(15 23 42 / 18%);
}

.archive-department-popover > input {
    width: 100%;
    min-height: var(--dfms-control-height, 2.75rem);
    padding: .5rem .6rem;
    color: var(--archive-text);
    background: var(--archive-surface-muted);
    border: 1px solid var(--archive-border);
    border-radius: .55rem;
    font: inherit;
}

.archive-department-popover > input:focus { outline: 0; border-color: var(--archive-primary); box-shadow: 0 0 0 3px rgb(102 126 234 / 16%); }
.department-tree { max-height: 16rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--archive-border); border-radius: .6rem; background: var(--archive-surface-muted); }
.department-tree__node { display: flex; align-items: center; min-width: 0; }
.department-tree button { font: inherit; }
.department-tree__all,
.department-tree__item { flex: 1; min-width: 0; padding: .52rem .6rem; overflow: hidden; color: var(--archive-text); background: transparent; border: 0; text-align: right; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.department-tree__toggle { width: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; color: var(--archive-text-muted); background: transparent; border: 0; cursor: pointer; }
.department-tree__toggle:disabled { opacity: .35; cursor: default; }
.department-tree__all:hover,
.department-tree__item:hover,
.department-tree .is-selected {
    color: var(--archive-primary);
    background: var(--archive-primary-soft);
    font-weight: 800;
}

.department-tree__all:focus-visible,
.department-tree__item:focus-visible,
.department-tree__toggle:focus-visible {
    outline: 2px solid var(--archive-primary);
    outline-offset: -2px;
}

@media (max-width: 37.5rem) {
    .archive-department-popover { position: static; margin-top: .25rem; }
    .department-tree { max-height: 14rem; }
}