/* 공용컴포넌트 · Tabulator 팝업(list 에디터 드롭다운 + 우클릭 컨텍스트 메뉴) 공용 CSS
 *
 * 대상: 모든 Tabulator 그리드(매물 목록·서브테이블 등)의
 *   - editor:"list" 셀 드롭다운  → .tabulator-edit-list*
 *   - rowContextMenu 우클릭 메뉴 → .tabulator-popup-container.tabulator-menu*
 *
 * ⚠️ Tabulator 5.6.1 실측: list 드롭다운과 우클릭 메뉴는 **둘 다 같은 요소**에
 *    .tabulator-popup-container 클래스를 달고 뜬다(Popup 생성자가 넘겨받은 요소 자체를
 *    컨테이너로 만듦). 그래서 메뉴 규칙은 반드시 `.tabulator-menu`로, 드롭다운 규칙은
 *    `.tabulator-edit-list`로 스코프해야 서로 오염되지 않는다.
 *
 * 의존: --db-* 디자인 토큰(properties_grid.css :root 정의). 이 파일은 룩만 담당.
 * 로드: unpkg tabulator_simple.min.css 뒤에 오도록 layout에서 properties_grid 다음에 link
 *       (동일 specificity 오버라이드 성립).
 * 정본: 이 파일 1곳. properties_grid.css 등에 중복 정의 금지.
 */

/* ── list 에디터 드롭다운 → 공용 _db_select 패널 룩 이식 (셀렉박스 드롭다운 통일) ──
   너비: _setListWidth()가 listEl.style.minWidth = 셀너비 를 설정 → 이게 **하한**.
   width 는 auto(shrink-to-fit)로 두어 옵션이 짧으면 셀 너비에 맞고, 옵션이 셀보다 길면
   내용 만큼 확장되어 **텍스트가 잘리지 않는다**(min=셀, 필요 시 확장). box-sizing:border-box. */
.tabulator-edit-list {
  padding: 4px;
  background: var(--db-color-card);
  border: 1px solid var(--db-color-outline);
  border-radius: var(--db-radius-input);
  box-shadow: var(--db-shadow-overlay);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  box-sizing: border-box;
}
.tabulator-edit-list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tabulator-edit-list .tabulator-edit-list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--db-radius-xs);
  font: var(--db-text-label-2); color: var(--db-color-text);
  cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
.tabulator-edit-list .tabulator-edit-list-item:hover,
.tabulator-edit-list .tabulator-edit-list-item.focused {
  background: var(--db-color-fill-subtle); color: var(--db-color-text); outline: none;
}
.tabulator-edit-list .tabulator-edit-list-item.active {
  background: transparent; color: var(--db-color-primary); font-weight: 600;
}
.tabulator-edit-list .tabulator-edit-list-item.active::after {
  content: "✓"; margin-left: auto; color: var(--db-color-primary);
}
.tabulator-edit-list .tabulator-edit-list-item.active.focused,
.tabulator-edit-list .tabulator-edit-list-item.active:hover {
  background: var(--db-color-fill-subtle); outline: none;
}
.tabulator-edit-list .tabulator-edit-list-placeholder {
  padding: 6px 10px; font: var(--db-text-label-2); color: var(--db-color-text-sub); text-align: center;
}
.tabulator-edit-list .tabulator-edit-list-group {
  padding: 6px 10px 4px; font: var(--db-text-label-2); font-weight: 700;
  color: var(--db-color-text-sub); border-bottom: 1px solid var(--db-color-outline);
}

/* ── 우클릭 컨텍스트 메뉴 — 디자인 토큰으로 통일 (door-butler-web_v1 application.css 이식) ──
   반드시 .tabulator-menu 로 스코프(위 ⚠️ 참고). */
.tabulator-popup-container.tabulator-menu {
  background: var(--db-color-card) !important;
  border: 1px solid var(--db-color-outline) !important;
  border-radius: var(--db-radius-md) !important;
  box-shadow: var(--db-shadow-overlay) !important;
  padding: 4px !important;
  font-family: var(--db-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  min-width: 140px !important;
}
.tabulator-popup-container.tabulator-menu .tabulator-menu-item {
  padding: 8px 12px !important;
  border-radius: var(--db-radius-xs) !important;
  color: var(--db-color-text) !important;
  white-space: nowrap !important;
}
.tabulator-popup-container.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
  background: var(--db-color-fill-subtle) !important;
  cursor: pointer !important;
}
.tabulator-popup-container.tabulator-menu .tabulator-menu-item-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.tabulator-popup-container.tabulator-menu .tabulator-menu-separator {
  border-top: 1px solid var(--db-color-outline) !important;
  margin: 4px 0 !important;
}