/* ═══ Tabulator 다크/라이트 테마 오버라이드 ═══
 * tabulator.min.css 이후에 로드
 * CSS 변수 기반 — common.css의 :root / [data-theme="dark"] 변수 사용
 * ═════════════════════════════════════════════ */

/* ─── 메인 컨테이너 ─────────────────────── */
/* 외곽선·모서리·그림자는 theme 에서 직접 제공 — 별도 wrapper(.admin-table 등) 불필요.
 * Tabulator 는 자체적으로 block + internal layout 을 사용 — display:flex 강제 금지
 * (forcing flex 가 Tabulator 의 header/tableholder/footer 내부 배치를 깨뜨림). */
 .tabulator {
  background: var(--color-table-bg) !important;
  border: 1px solid var(--color-border) !important;
  /* border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important; */
  color: var(--color-text) !important;
  font-family: inherit !important;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ─── 헤더 (Tabulator 내부 레이아웃이 상단 고정 처리 — 색상만 조정) ─────── */
.tabulator-header {
  background-color: var(--color-table-th-bg) !important;
  color: var(--color-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  transition: background-color 0.3s ease;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
  padding-right: 0px !important;
}
.tabulator-header .tabulator-col {
  background: transparent !important;
  border-right: 1px solid var(--color-border) !important;
}

/* 헤더 정책 (참고: tabulator.info/examples/6.4#menu)
 * - 라벨(title): 왼쪽 정렬
 * - sorter: 우측 고정
 * - 컬럼 사이즈 축소 시 라벨은 1줄 + ellipsis */
.tabulator-header .tabulator-col-content {
  padding: 8px 0px !important;
  position: relative;
}

/* 체크박스/관리 컬럼 — 가운데 정렬 유지 (sorter 없음) */
.tabulator-header .tabulator-col[tabulator-field=""] .tabulator-col-content,
.tabulator-header .tabulator-col:first-child .tabulator-col-content {
  padding: 8px 0 !important;
  justify-content: center;
}
.tabulator-header .tabulator-col[tabulator-field=""] .tabulator-col-title,
.tabulator-header .tabulator-col:first-child .tabulator-col-title {
  text-align: center;
}
/* 첫 컬럼은 sorter 가 없으므로 holder 의 좌·우 패딩 제거 */
.tabulator-header .tabulator-col[tabulator-field=""] .tabulator-col-title-holder,
.tabulator-header .tabulator-col:first-child .tabulator-col-title-holder {
  padding: 0;
}

.tabulator-header .tabulator-col-title-holder {
  position: relative;
  min-width: 0;
  /* 좌측 라벨 여백 + 우측 sorter 자리 (col-content 가 padding 0 이라 여기서 보정) */
  /* padding: 0 28px 0 12px; */
  width: 100%;
  /* overflow:hidden 은 여기서 제거 — title 자체에서 처리해야 ellipsis 가 정확히 동작 */
}

/* title 은 block — flex 컨테이너에서는 단일 텍스트의 text-overflow:ellipsis 가
 * 일부 브라우저에서 동작 안 함 (anonymous flex item 처리). block 으로 두어야
 * white-space:nowrap + overflow:hidden + text-overflow:ellipsis 가 신뢰적으로 동작. */
.tabulator-header .tabulator-col-title {
  display: block !important;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  line-height: 1.6;          /* 수직 가운데 정렬은 line-height 로 — flex 미사용 */
  text-align: left;
  width: 100%;
  min-width: 0;
  min-height: 1.3em;
}

/* sortable 컬럼: 기본 Tabulator 의 padding-left:25px override 제거 */
.tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {
  padding-left: 0 !important;
}

/* 정렬 아이콘 — 우측 고정 (col-content padding-right:28px 안쪽) */
.tabulator-header .tabulator-col-sorter {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ─── 테이블 본체 ───────────────────────── */
.tabulator-tableholder,
.tabulator-table {
  background-color: var(--color-table-bg) !important;
}

/* ─── 푸터 (padding 만 조정 — 레이아웃은 Tabulator 기본) ─── */
.tabulator .tabulator-footer {
  padding: 0px 12px !important;
}

/* ─── 행 ────────────────────────────────── */
.tabulator-row,
.tabulator-row.tabulator-row-even,
.tabulator-row.tabulator-row-odd {
  background-color: var(--color-table-row-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text) !important;
  transition: background-color 0.2s ease !important;
}

.tabulator-row.tabulator-row-even {
  background-color: transparent !important;
}

/* ─── 호버 ──────────────────────────────── */
.tabulator-row:hover,
.tabulator-row.tabulator-row-even:hover {
  background-color: var(--color-table-hover) !important;
  cursor: pointer;
}

/* ─── 셀 ────────────────────────────────── */
/* display 는 !important 금지 — Tabulator 가 컬럼 숨김 시 inline `display: none` 을
 * 적용하는데 !important 가 그보다 우선해 버려서 숨김 동작이 무시됨.
 * !important 없이 선언하면 Tabulator 의 인라인 스타일이 이김. */
.tabulator-cell {
  background-color: transparent !important;
  padding: 7px 12px !important;
  border-right: 1px solid var(--color-border) !important;
  display: inline-flex;
  align-items: center;
}

/* ─── 고정(frozen) 컬럼 ─────────────────── */
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right,
.tabulator-header .tabulator-col.tabulator-frozen.tabulator-frozen-right {
  border-left: 1px solid var(--color-border) !important;
}

/* 말줄임 (formatter 내부 div에 적용) */
.cell-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* 다중행 wrap (formatter='wrap', detail/log 등 긴 텍스트용) */
.cell-wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.45;
  width: 100%;
  text-align: left;
  padding: 2px 0;
}

/* wrap 컬럼이 포함된 행은 자동 높이 조정 */
.tabulator-row .tabulator-cell:has(.cell-wrap) {
  white-space: normal !important;
  height: auto !important;
  align-items: flex-start !important;
}

/* 버튼/아이콘 셀 — 말줄임 해제 */
.cell-actions {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* ─── 선택 체크박스 ──────────────────────── */
.tabulator-row.tabulator-selected {
  background-color: var(--color-primary-glow) !important;
}

.tabulator-row.tabulator-selected:hover {
  background-color: var(--color-table-hover) !important;
}

/* ─── 푸터/페이징 ───────────────────────── */
.tabulator-footer {
  background-color: var(--color-table-th-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-muted) !important;
  padding: 9px 16px !important;
  transition: background-color 0.3s ease;
}

.tabulator-footer .tabulator-page {
  background: var(--color-section-bg) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-muted) !important;
  border-radius: 6px;
  margin: 0 4px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
}

.tabulator-footer .tabulator-page:not(.disabled):hover {
  background: var(--color-table-hover) !important;
  color: var(--color-text) !important;
  border-color: var(--color-primary) !important;
}

.tabulator-footer .tabulator-page.active {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 8px var(--color-primary-glow) !important;
}

/* ─── 반응형 접기 ───────────────────────── */
.tabulator-responsive-collapse {
  background: var(--color-table-th-bg) !important;
  color: var(--color-text) !important;
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  padding: 7px !important;
}

.tabulator-responsive-collapse table {
  background-color: transparent !important;
}

.tabulator-responsive-collapse table tr td {
  background-color: transparent !important;
  color: var(--color-muted) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 5px !important;
}

.tabulator-responsive-collapse table tr td strong {
  color: var(--color-text) !important;
}

/* ─── 정렬 화살표 색상 ──────────────────── */

.tabulator-header .tabulator-col .tabulator-col-sorter .tabulator-arrow {
  border-bottom-color: var(--color-muted) !important;
  border-top-color: var(--color-muted) !important;
}

.tabulator-sortable:hover {
  background: var(--color-table-hover) !important;
}

/* ─── 반응형 토글 아이콘 ─────────────────── */
.tabulator-responsive-collapse-toggle {
  color: var(--color-primary) !important;
}

.tabulator-responsive-collapse-toggle.open svg {
  fill: var(--color-primary) !important;
}

/* ─── placeholder ───────────────────────── */
/* 라이브러리 기본: .tabulator-placeholder[tabulator-render-mode=virtual] { min-height:100% }
   → 데이터 0 시 부모 높이를 모두 차지해 큰 빈 영역 + 불필요한 스크롤. 자연 높이로 축소. */
.tabulator-placeholder,
.tabulator-placeholder[tabulator-render-mode="virtual"] {
  background: var(--color-table-bg) !important;
  color: var(--color-muted) !important;
  min-height: 0 !important;
  height: auto !important;
}
.tabulator-placeholder-contents {
  padding: 24px 16px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400 !important;
}

/* ─── Loader 오버레이 ───────────────────── */
.tabulator-loader {
  background: var(--color-card-bg);
  opacity: 0.85;
}
.tabulator-loader .tabulator-loader-msg {
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}