/* ── dpill — shared dropdown-pill widget ────────────────── */
.dpill-wrap { position: relative; }

.dpill-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid var(--color-base-200);
  border-radius: 5px;
  background: var(--color-base-0, #fff);
  cursor: pointer;
  font-size: 13px;
  color: var(--color-font-default-light);
  width: 100%;
  justify-content: space-between;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s;
}
.dpill-btn:hover { background: var(--color-base-50); }
.dpill-btn.active {
  border-color: var(--color-primary-500);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
}

.dpill-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  background: var(--color-base-0, #fff);
  border: 1px solid var(--color-base-200);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  padding-bottom: 4px;
  overflow-y: auto;
  max-height: 280px;
  width: 100%;
}

.dpill-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  color: var(--color-base-700);
  font-family: inherit;
}
.dpill-item:hover { background: var(--color-base-50); }
.dpill-item.selected { color: var(--color-primary-700); font-weight: 500; }

.dpill-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--color-base-400);
  font-style: italic;
  text-align: center;
}

/* Dark mode */
html.dark .dpill-btn {
  background: var(--color-base-900);
  border-color: var(--color-base-700);
  color: var(--color-base-100);
}
html.dark .dpill-btn:hover { background: var(--color-base-800); }
html.dark .dpill-btn.active {
  border-color: var(--color-primary-500);
  color: var(--color-primary-300);
  background: rgba(99, 102, 241, 0.15);
}
html.dark .dpill-menu {
  background: var(--color-base-800);
  border-color: var(--color-base-700);
}
html.dark .dpill-item { color: var(--color-base-300); }
html.dark .dpill-item:hover { background: var(--color-base-700); }
html.dark .dpill-item.selected { color: var(--color-primary-300); }
html.dark .dpill-empty { color: var(--color-base-500); }

/* Search input inside dpill-menu */
.dpill-search-wrap { position: sticky; top: 0; z-index: 1; background: var(--color-base-0, #fff); padding: 6px; border-bottom: 1px solid var(--color-base-100); }
.dpill-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--color-base-400); pointer-events: none; }
.dpill-search-input { width: 100%; box-sizing: border-box; padding: 5px 8px 5px 26px; border: 1px solid var(--color-base-300); border-radius: 4px; font-size: 12px; background: var(--color-base-50); color: var(--color-font-body); outline: none; font-family: inherit; }
.dpill-search-input:focus { border-color: var(--color-primary-400); }

html.dark .dpill-search-wrap { background: var(--color-base-800); border-bottom-color: var(--color-base-700); }
html.dark .dpill-search-icon { color: var(--color-base-400); }
html.dark .dpill-search-input { background: var(--color-base-700); border-color: var(--color-base-600); color: var(--color-base-200); }
html.dark .dpill-search-input:focus { border-color: var(--color-primary-500); }