/* ═══════════════════════════════════════════════════════════════════════════
   UI DATAGRID — 전역 테이블 그리드 공통 스타일
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 그리드 패널 ─────────────────────────────────────────────────────────── */

.pls-grid-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--radius-md);
  background: var(--new-bg-panel, #fff);
}

.pls-grid-scroll {
  flex: 1 1 0;
  min-width: 0;
  overflow: auto;
}

/* ─── 테이블 ──────────────────────────────────────────────────────────────── */

.pls-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.pls-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.pls-table thead tr { background: var(--new-bg-panel-head, #fff); }

/* ─── 헤더 셀 (th) ───────────────────────────────────────────────────────── */

.pls-th {
  position: relative;
  padding: 0 var(--space-2);
  height: var(--panel-head-height);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-subtle, #64748b);
  white-space: nowrap;
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  text-transform: none;
  letter-spacing: 0;
  text-align: center;
  background: var(--new-bg-panel-head, #fff);
}

.pls-th:last-child { border-right: none; }

/* 첫/끝 셀 여백만 패널 헤더와 정렬 (정렬은 기본 center 유지) */
.pls-table th:first-child,
.pls-table td:first-child { padding-left: var(--panel-head-px) !important; }
.pls-table th:last-child,
.pls-table td:last-child { padding-right: var(--panel-head-px) !important; }

/* 헤더 첫/끝 th의 모서리 라운드 — 컨테이너 라운드 살리기 */
.pls-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-md); }
.pls-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius-md); }

.pls-th--sticky {
  position: sticky;
  left: 0;
  z-index: 11;
  background: var(--new-bg-panel-head, #fff);
  border-right: none;
}

.pls-th__label { white-space: nowrap; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.pls-th__sort { font-size: 9px; color: #3b82f6; flex-shrink: 0; }

/* ─── 데이터 행 (tr) ──────────────────────────────────────────────────────── */

.pls-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pls-row:nth-child(even) td { background: #ffffff; }
.pls-row:nth-child(odd) td { background: #ffffff; }
.pls-row:hover td { background: #f8f9fa; cursor: pointer; }
.pls-row.is-selected td { background: #eef2ff !important; }
.pls-row.is-selected:hover td { background: #e0e7ff !important; }

/* ─── 데이터 셀 (td) ─────────────────────────────────────────────────────── */

.pls-cell {
  padding: 0 var(--space-2);
  height: 34px; /* 헤더(40px)보다 살짝 작게 — 줄 간격 컴팩트 */
  vertical-align: middle;
  font-size: var(--font-size-base);
  color: var(--text-main, #1f1f1f);
  white-space: nowrap;
  letter-spacing: -0.03em;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.pls-table th:last-child,
.pls-table td:last-child { border-right: none; }
.pls-row.is-active .pls-cell { border-bottom-color: rgba(0, 0, 0, 0.06); }
/* jpkerp 스타일 zebra 줄 — 짝수 행 살짝 음영 */
.pls-table tbody tr:nth-child(even) .pls-cell { background: #fafbfc; }
.pls-table tbody tr:hover .pls-cell { background: #f4f6fa; }
.pls-table tbody tr.is-active .pls-cell { background: #e8edf5; }

.pls-cell--sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: var(--font-weight-strong);
  color: var(--text-main, #1f1f1f);
  background: inherit;
}

.pls-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: 'Pretendard', monospace;
}

.pls-cell--dim { color: #64748b; }

.pls-cell[style*="max-width"] {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── 정렬 유틸 ───────────────────────────────────────────────────────────── */

.pls--center { text-align: center; }
.pls--right { text-align: right; }

/* ─── 행 액션 버튼 ──────────────────────────────────────────────────────── */

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--height-xs);
  height: var(--height-xs);
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #80868b;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.row-action-btn:hover {
  background: #f1f3f4;
  color: #1f1f1f;
}

.row-action-btn svg,
.row-action-btn path,
.row-action-btn circle,
.row-action-btn line {
  pointer-events: none;
}

.row-action-btn--danger:hover {
  background: #fce8e6;
  color: #d93025;
}

/* ─── 상태 배지 ───────────────────────────────────────────────────────────── */

.pls-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--badge-min-width);
  height: var(--badge-height);
  padding: 0 var(--badge-padding-x);
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* ── 상태 아이콘 (채팅/계약 목록) ── */
.chat-reply-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-reply-icon--pending { color: #f59e0b; }
.chat-reply-icon--done { color: #10b981; }

.pls-badge--ok { background: #dcfce7; color: #166534; }
.pls-badge--warn { background: #fef3c7; color: #92400e; }
.pls-badge--off { background: #f1f5f9; color: #64748b; }

/* ─── 빈 목록 ─────────────────────────────────────────────────────────────── */

.pls-table .list-empty {
  padding: var(--height-2xl) var(--space-4);
  text-align: center;
  font-size: var(--font-size-base);
  color: #94a3b8;
}

/* ─── 색상 배지 (호환) ────────────────────────────────────────────────────── */

.color-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--list-badge-radius, var(--radius-ui, 8px)); font-size: var(--font-size-xs); font-weight: var(--font-weight-heavy); line-height: 1; border: 1px solid rgba(0,0,0,0.08); }
.color-badge--on-dark { color: #fff; }
.color-badge--on-light { color: #333; }
.color-badge--empty { background: transparent; border: 1px dashed #cbd5e1; color: #94a3b8; }

/* ─── 헤더 필터 (filterable / searchable) ────────────────────────────────── */

.pls-th--sortable,
.pls-th--filterable { cursor: pointer; }
.pls-th--filterable:hover { background: #e2e8f0; color: #1e293b; }
.pls-th--filterable.is-filtering { background: #e2e8f0; color: #1e293b; }

/* 필터 걸린 컬럼 */
.pls-th { position: relative; }
.pls-th--has-filter { background: #eef2ff; }
.pls-th--has-filter .pls-th__label { color: #4338ca; font-weight: var(--font-weight-heavy); }
/* 필터 개수 뱃지 — 라벨 텍스트 우측 상단 끝에 붙임 */
.pls-th__label { position: relative; }
.pls-th__filter-count {
  position: absolute;
  top: -6px;
  left: 100%;
  margin-left: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--radius-pill, 999px);
  background: #f59e0b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.3);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
/* 정렬 걸린 컬럼 */
.pls-th--sort-asc { background: #fef2f2; }
.pls-th--sort-asc .pls-th__label { color: #dc2626; font-weight: var(--font-weight-heavy); }
.pls-th--sort-asc .pls-th__sort { color: #dc2626; }
.pls-th--sort-desc { background: #eff6ff; }
.pls-th--sort-desc .pls-th__label { color: #2563eb; font-weight: var(--font-weight-heavy); }
.pls-th--sort-desc .pls-th__sort { color: #2563eb; }
/* 필터 + 정렬 동시 */
.pls-th--has-filter.pls-th--sort-asc { background: linear-gradient(135deg, #eef2ff 50%, #fef2f2 50%); }
.pls-th--has-filter.pls-th--sort-desc { background: linear-gradient(135deg, #eef2ff 50%, #eff6ff 50%);
  border-radius: 1px;
}

.pls-filter-dd {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  max-width: 220px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px 0;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-ui, 8px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
}

.pls-filter-dd[hidden] { display: none; }

.pls-filter-dd label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-1);
  height: var(--height-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-base);
  color: #1e293b;
  cursor: pointer;
  letter-spacing: -0.03em;
}

.pls-filter-dd label:hover { background: #f1f5f9; }
.pls-filter-dd input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
}

.pls-fdd__section { padding: 2px 0; }
.pls-fdd__section + .pls-fdd__section { border-top: 1px solid #e2e8f0; }
.pls-fdd__title { padding: 2px 6px 1px; font-size: 9px; font-weight: var(--font-weight-heavy); color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }

.pls-fdd__sort-row { display: flex; gap: 3px; padding: 3px 6px; border-bottom: 1px solid #e2e8f0; }
.pls-fdd__sort-btn { flex: 1; height: 22px; border: 1px solid #e2e8f0; border-radius: var(--radius-xs); background: #fff; font-size: var(--font-size-xs); color: #64748b; cursor: pointer; letter-spacing: -0.02em; }
.pls-fdd__sort-btn:hover { background: #f1f5f9; color: #1e293b; }
.pls-fdd__sort-btn.is-active { font-weight: var(--font-weight-heavy); }
.pls-fdd__sort-btn.is-active[data-sort-dir="1"] { background: #fef2f2; border-color: #fca5a5; color: #dc2626; }
.pls-fdd__sort-btn.is-active[data-sort-dir="-1"] { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }

.pls-fdd__count { margin-left: auto; font-size: 9px; color: #94a3b8; font-variant-numeric: tabular-nums; flex-shrink: 0; }

.pls-fdd__actions { display: flex; gap: 3px; padding: 3px 6px; border-top: 1px solid #e2e8f0; position: sticky; bottom: 0; background: #fff; }
.pls-fdd__action-btn { flex: 1; height: 22px; border: 1px solid #e2e8f0; border-radius: var(--radius-xs); background: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-heavy); cursor: pointer; letter-spacing: -0.02em; }
.pls-fdd__action-btn--reset { color: #64748b; }
.pls-fdd__action-btn--reset:hover { background: #f1f5f9; }
.pls-fdd__action-btn--apply { background: #1e293b; border-color: #1e293b; color: #fff; }
.pls-fdd__action-btn--apply:hover { background: #0f172a; }

.pls-fdd__search-wrap { padding: 6px; display: flex; align-items: center; gap: 6px; }

.pls-fdd__match-count {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 400;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.pls-fdd__match-count:empty { display: none; }

.pls-fdd__match-count--zero { color: #94a3b8; }
.pls-fdd__search { width: 100%; height: var(--height-xs); padding: 0 6px; border: 1px solid #cbd5e1; border-radius: var(--radius-xs); background: #fff; font-size: var(--font-size-xs); color: #1e293b; outline: none; letter-spacing: -0.02em; }
.pls-fdd__search:focus { border-color: #94a3b8; box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.06); }

.pls-filter-dd label.is-checked { background: #f1f5f9; }
.pls-filter-dd label.is-checked .pls-fdd__count { color: #475569; }

.pls-fdd__section-title {
  padding: 7px 10px 5px;
  font-size: 10px;
  font-weight: 800;
  color: #475569;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f8fafc;
  border-bottom: 1px solid #e5e8eb;
  margin: 0 -6px;
  padding-left: 12px;
}

/* ─── 공용 우클릭 컨텍스트 메뉴 ──────────── */
.pm-ctx-menu {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 4px 0;
  min-width: 160px;
  font-family: inherit;
}
.pm-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 12px;
  color: #0f172a;
  cursor: pointer;
  white-space: nowrap;
}
.pm-ctx-item:hover { background: #f1f5f9; }
.pm-ctx-item svg { flex-shrink: 0; color: #64748b; }
.pm-ctx-item--danger { color: #dc2626; }
.pm-ctx-item--danger svg { color: #dc2626; }
.pm-ctx-item--danger:hover { background: #fef2f2; }
.pm-ctx-item--parent { position: relative; }
.pm-ctx-chevron { margin-left: auto; color: #94a3b8; }
.pm-ctx-divider {
  height: 1px;
  background: #e5e8eb;
  margin: 4px 0;
}
.pm-ctx-sub { position: relative; }
.pm-ctx-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -4px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  padding: 4px 0;
  min-width: 120px;
  z-index: 1;
}
.pm-ctx-sub:hover .pm-ctx-submenu { display: block; }
.pm-ctx-submenu .pm-ctx-item { padding: 7px 14px; }