/*
 * Pro 모듈(메뉴·세트 필터·상태바) 스타일. wgrid.css와 같은 디자인 언어(왔니 컴포넌트 기준)를 따른다.
 * 메뉴와 세트 필터는 body에 붙으므로 그리드의 변수를 상속받지 못해 자체 변수를 정의한다.
 */
.wgrid-menu,
.wgrid-sf {
  --wgrid-pop-bg: #fff;
  --wgrid-pop-fg: #212529;
  --wgrid-pop-border: rgba(0, 0, 0, 0.175);
  --wgrid-pop-hover: #e9ecef;
  --wgrid-pop-muted: #4f5b69; /* 호버 배경 위에서도 대비 4.5:1 이상 */
  --wgrid-pop-control-border: #dee2e6;
  --wgrid-pop-surface: #f8f9fa;
  --wgrid-pop-accent: #2196f3;
  --wgrid-pop-primary: #003a7f;
  --wgrid-pop-primary-fg: #fff;
  --wgrid-pop-focus-border: #809dbf;
  --wgrid-pop-focus-ring: rgba(0, 58, 127, 0.25);
  --wgrid-pop-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  color: var(--wgrid-pop-fg);
  background: var(--wgrid-pop-bg);
  border: 1px solid var(--wgrid-pop-border);
  border-radius: 6px;
  box-shadow: var(--wgrid-pop-shadow);
  font: 14px / 1.5 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Noto Sans KR', 'Segoe UI', sans-serif;
}

.wgrid-menu[data-theme='dark'],
.wgrid-sf[data-theme='dark'] {
  --wgrid-pop-bg: #232932;
  --wgrid-pop-fg: #e4e7eb;
  --wgrid-pop-border: #3a424c;
  --wgrid-pop-hover: #2f3946;
  --wgrid-pop-muted: #b9c2cd;
  --wgrid-pop-control-border: #3a424c;
  --wgrid-pop-surface: #1b1f24;
  --wgrid-pop-accent: #64b5f6;
  --wgrid-pop-primary: #6ea8fe;
  --wgrid-pop-primary-fg: #0b1220;
  --wgrid-pop-focus-border: #6ea8fe;
  --wgrid-pop-focus-ring: rgba(110, 168, 254, 0.3);
  --wgrid-pop-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* ── 메뉴 (부트스트랩 드롭다운 느낌) ── */
.wgrid-menu {
  min-width: 190px;
  max-width: 340px;
  max-height: calc(100vh - 8px);
  overflow-y: auto;
  padding: 8px 0;
  outline: none;
}

.wgrid-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 16px 4px 8px;
  cursor: default;
  white-space: nowrap;
  outline: none;
}

.wgrid-menu-item:hover,
.wgrid-menu-item:focus {
  background: var(--wgrid-pop-hover);
}

.wgrid-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--wgrid-pop-primary);
}

.wgrid-menu-item[aria-disabled='true'] {
  color: var(--wgrid-pop-muted);
}

.wgrid-menu-mark {
  flex: none;
  width: 16px;
  text-align: center;
  color: var(--wgrid-pop-primary);
}

.wgrid-menu-label {
  flex: 1 1 auto;
}

.wgrid-menu-shortcut,
.wgrid-menu-arrow {
  flex: none;
  margin-left: 16px;
  color: var(--wgrid-pop-muted);
  font-size: 12px;
}

.wgrid-menu-separator {
  height: 0;
  margin: 8px 0;
  border-top: 1px solid var(--wgrid-pop-control-border);
}

/* ── 헤더의 컬럼 메뉴·필터 버튼 ── */
.wgrid-menu-button {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 1;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
  padding: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 4px;
  opacity: 0;
  cursor: pointer;
}

.wgrid-header-cell:hover .wgrid-menu-button,
.wgrid-menu-button:focus-visible,
.wgrid-menu-button[aria-expanded='true'] {
  opacity: 1;
}

.wgrid-menu-button:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── 상태 표시줄 ── */
.wgrid-statusbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 16px;
  color: var(--wgrid-control-fg);
  background: var(--wgrid-surface-alt);
  border-top: 1px solid var(--wgrid-border);
  font-size: 13px;
}

.wgrid-status-panel:empty {
  display: none;
}

.wgrid-status-left {
  margin-right: auto;
}

.wgrid-status-center {
  margin: 0 auto;
}

.wgrid-status-right {
  margin-left: auto;
}

/* ── 세트 필터 ── */
.wgrid-sf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
  padding: 12px;
}

.wgrid-sf-search {
  box-sizing: border-box;
  width: 100%;
  height: 31px;
  padding: 0 8px;
  font: inherit;
  color: inherit;
  background: var(--wgrid-pop-bg);
  border: 1px solid var(--wgrid-pop-control-border);
  border-radius: 4px;
}

.wgrid-sf-search:focus {
  border-color: var(--wgrid-pop-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--wgrid-pop-focus-ring);
}

.wgrid-sf-all {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  font-weight: 500;
  cursor: pointer;
}

.wgrid-sf-all input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: var(--wgrid-pop-bg) center / 12px no-repeat;
  border: 1px solid var(--wgrid-pop-muted);
  border-radius: 4px;
  cursor: pointer;
}

.wgrid-sf-all input[type='checkbox']:checked,
.wgrid-sf-all input[type='checkbox']:indeterminate {
  background-color: var(--wgrid-pop-accent);
  border-color: var(--wgrid-pop-accent);
}

.wgrid-sf-all input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.5l2.5 2.5 4.5-5.5'/%3e%3c/svg%3e");
}

.wgrid-sf-all input[type='checkbox']:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' d='M3 6h6'/%3e%3c/svg%3e");
}

.wgrid-sf-all input[type='checkbox']:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wgrid-pop-accent) 50%, transparent);
}

.wgrid-sf-list {
  position: relative;
  overflow-y: auto;
  border: 1px solid var(--wgrid-pop-control-border);
  border-radius: 4px;
  outline: none;
}

.wgrid-sf-list:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--wgrid-pop-focus-ring);
  border-color: var(--wgrid-pop-focus-border);
}

.wgrid-sf-spacer {
  width: 1px;
}

.wgrid-sf-item {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  cursor: default;
}

.wgrid-sf-item:hover {
  background: var(--wgrid-pop-hover);
}

.wgrid-sf-list:focus .wgrid-sf-active {
  box-shadow: inset 0 0 0 2px var(--wgrid-pop-primary);
}

.wgrid-sf-check {
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--wgrid-pop-muted);
  border-radius: 4px;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
}

.wgrid-sf-item[aria-selected='true'] .wgrid-sf-check {
  color: #fff;
  background: var(--wgrid-pop-accent);
  border-color: var(--wgrid-pop-accent);
}

.wgrid-sf[data-theme='dark'] .wgrid-sf-item[aria-selected='true'] .wgrid-sf-check {
  color: #0b1220;
}

.wgrid-sf-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wgrid-sf-count {
  flex: none;
  color: var(--wgrid-pop-muted);
  font-size: 12px;
}

.wgrid-sf-empty {
  padding: 16px;
  color: var(--wgrid-pop-muted);
  text-align: center;
}

.wgrid-sf-summary {
  color: var(--wgrid-pop-muted);
  font-size: 12px;
}

.wgrid-sf-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.wgrid-sf-btn {
  height: 31px;
  padding: 0 12px;
  font: inherit;
  color: var(--wgrid-pop-fg);
  background: var(--wgrid-pop-bg);
  border: 1px solid var(--wgrid-pop-control-border);
  border-radius: 4px;
  cursor: pointer;
}

.wgrid-sf-btn:hover:not(:disabled) {
  background: var(--wgrid-pop-hover);
}

.wgrid-sf-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--wgrid-pop-focus-ring);
}

.wgrid-sf-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.wgrid-sf-primary {
  color: var(--wgrid-pop-primary-fg);
  background: var(--wgrid-pop-primary);
  border-color: var(--wgrid-pop-primary);
}

.wgrid-sf-primary:hover:not(:disabled) {
  color: var(--wgrid-pop-primary-fg);
  background: var(--wgrid-pop-primary);
  filter: brightness(1.15);
}

/* ── 합계 행 (상태 표시줄 위, 컬럼과 같은 위치에 정렬) ── */
.wgrid-summary {
  flex: none;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--wgrid-fg);
  background: var(--wgrid-surface-alt);
  border-top: 1px solid var(--wgrid-border);
  font-weight: 700;
}

.wgrid-summary-track {
  position: relative;
  height: var(--wgrid-row-height);
}

.wgrid-summary-cell {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--wgrid-cell-padding);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--wgrid-surface-alt);
  font-variant-numeric: tabular-nums;
}

.wgrid-summary-cell[data-zone='left'],
.wgrid-summary-cell[data-zone='right'] {
  z-index: 1;
}

/* 값 정렬: 컬럼의 정렬을 따른다 */
.wgrid-summary-cell[style*='text-align: right'] {
  justify-content: flex-end;
}

.wgrid-summary-cell[style*='text-align: center'] {
  justify-content: center;
}

.wgrid-summary + .wgrid-statusbar {
  border-top: 1px solid var(--wgrid-border);
}