/* AG Grid 커스텀 스타일 */

/* 전역적으로 적용되도록 루트 레벨에서 CSS 변수 정의 */
:root {
  --ag-active-color: #9ca3af !important; /* gray-400 */
}

/* 활성 색상을 회색으로 변경 */
.ag-theme-quartz {
  --ag-active-color: #9ca3af !important; /* gray-400 */
}

/* 다크모드 대응 */
.dark .ag-theme-quartz-dark,
.dark .ag-theme-quartz {
  --ag-active-color: #6b7280 !important; /* gray-500 */
}

/* 선택된 행의 스타일 */
.ag-theme-quartz .ag-row-selected::before,
.ag-theme-quartz-dark .ag-row-selected::before {
  background-color: var(--ag-active-color);
  opacity: 0.1;
}

/* 호버 시 스타일 */
.ag-theme-quartz .ag-row:hover,
.ag-theme-quartz-dark .ag-row:hover {
  background-color: rgba(156, 163, 175, 0.05);
}

/* 활성 셀의 테두리 */
.ag-theme-quartz .ag-cell-focus:not(.ag-cell-range-single-cell),
.ag-theme-quartz-dark .ag-cell-focus:not(.ag-cell-range-single-cell) {
  border-color: var(--ag-active-color) !important;
}

/* 체크박스 스타일 */
.ag-theme-quartz .ag-checkbox-input-wrapper input:checked + .ag-checkbox-input,
.ag-theme-quartz-dark .ag-checkbox-input-wrapper input:checked + .ag-checkbox-input {
  background-color: var(--ag-active-color);
  border-color: var(--ag-active-color);
}
.ag-selection-checkbox {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}
.ag-selection-checkbox * {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}
.ag-checkbox {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}
.ag-checkbox * {
  font-family: "agGridQuartz", "agGridAlpine", sans-serif !important;
}

/* 헤더의 정렬 아이콘 */
.ag-theme-quartz .ag-header-cell-sorted-asc .ag-sort-ascending-icon,
.ag-theme-quartz .ag-header-cell-sorted-desc .ag-sort-descending-icon,
.ag-theme-quartz-dark .ag-header-cell-sorted-asc .ag-sort-ascending-icon,
.ag-theme-quartz-dark .ag-header-cell-sorted-desc .ag-sort-descending-icon {
  color: var(--ag-active-color);
}

/* 필터의 활성 상태 */
.ag-theme-quartz .ag-filter-active,
.ag-theme-quartz-dark .ag-filter-active {
  color: var(--ag-active-color);
}

/* 페이지네이션의 활성 페이지 */
.ag-theme-quartz .ag-paging-button.ag-paging-button-active,
.ag-theme-quartz-dark .ag-paging-button.ag-paging-button-active {
  background-color: var(--ag-active-color);
  color: white;
}