/* ========================================
   Sidebar Menu Styles
   - 좌측 사이드바 메뉴 스타일
   ======================================== */

/* 사이드바 active 포커스 */
.sidebar-menu .list-group-item.active {
  background: #f3f5f7;
  font-weight: 600;
  border: none !important;
}

/* 사이드바 list-group border 투명 */
.sidebar-menu .list-group,
.sidebar-menu .list-group-item {
  border: none !important;
  border-color: transparent !important;
}

/* 사이드바 아코디언 화살표 숨김 (children이 없을 때) */
.sidebar-menu .accordion-button.no-arrow::after {
  display: none !important;
}

/* 사이드바 제목 스타일 (캡쳐 화면 기반) */
.sidebar-menu .sidebar-title-wrapper {
  position: relative;
  margin-bottom: 20px;
}

.sidebar-menu .sidebar-title-line {
  height: 1px;
  background-color: #e0e0e0;
  margin-bottom: 15px;
}

.sidebar-menu .sidebar-title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #333;
  padding: 0px 1px;
}

.sidebar-menu .sidebar-title-bar {
  display: inline-block;
  width: 3px;
  height: 18px;
  background-color: var(--theme-color-secondary); /* 오렌지색 */
  margin-right: 8px;
  flex-shrink: 0;
}

.sidebar-menu .sidebar-title-text {
  flex: 1;
}

/* 사이드바 토글 버튼 스타일 */
.sidebar-menu .sidebar-toggle-btn {
  background: transparent;
  border: 1px solid #ddd;
  padding: 4px 8px;
  cursor: pointer;
  color: #666;
  font-size: 1.2rem;
  transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
}

.sidebar-menu .sidebar-toggle-btn:hover {
  color: var(--theme-color-primary, var(--theme-color-secondary));
  background-color: color-mix(in srgb, var(--theme-color-primary, #e97730) 10%, transparent);
  border-color: var(--theme-color-primary, var(--theme-color-secondary));
}

.sidebar-menu .sidebar-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-color-primary, #e97730) 25%, transparent);
}

.sidebar-menu .sidebar-toggle-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}

/* 사이드바 메뉴 래퍼 스타일 (스크롤 위치에 따라 top 값 동적 변경) */
.sidebar-menu-wrapper {
  position: sticky;
  /* top과 max-height는 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
  /* CSS 변수는 테마 정보용으로만 사용하므로 여기서는 기본값만 설정 */
  top: 10px; /* JavaScript에서 동적으로 변경됨 */
  align-self: flex-start; /* flex 컨테이너 내에서 정렬 */
  max-height: calc(100vh - 10px); /* JavaScript에서 동적으로 변경됨 */
  overflow-y: auto; /* 내용이 넘치면 스크롤 */
  z-index: 10; /* 다른 요소 위에 표시 */
}

/* 좌측/우측 메뉴일 때 서브메뉴 상단 위치: header-top 하단 + 10px */
/* top과 max-height는 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
body.nav-layout-left .sidebar-menu-wrapper,
body.nav-layout-right .sidebar-menu-wrapper {
  top: 10px; /* JavaScript에서 동적으로 변경됨 */
  max-height: calc(100vh - 10px); /* JavaScript에서 동적으로 변경됨 */
}

/* 사이드바 fade 애니메이션 효과 및 스크롤 고정 */
.sidebar-menu {
  transition: opacity 0.6s ease, transform 0.6s ease;
  /* 스크롤 고정 (접히지 않았을 때만) */
  position: relative;
  width: 100%;
}

/* 접혔을 때는 sticky 제거 (좌측 및 우측 공통) */
.col-lg-3.sidebar-collapsed .sidebar-menu-wrapper,
.sidebar-left.sidebar-collapsed .sidebar-menu-wrapper {
  position: static; /* sticky 해제 */
  max-height: none;
  overflow-y: visible;
}

/* 우측 사이드바 접힘 시 상단에 고정 */
/* top은 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
.sidebar-right.sidebar-collapsed .sidebar-menu-wrapper {
  position: sticky !important; /* 상단에 고정 */
  /* top은 JavaScript에서 동적으로 설정됨 */
  max-height: none;
  overflow-y: visible;
  align-self: flex-start; /* 상단 정렬 */
}

/* 좌측/우측 메뉴일 때 접힌 사이드바도 header-top 하단 + 10px에 고정 */
/* top은 JavaScript에서 window 전역변수를 사용하여 동적으로 설정됨 */
body.nav-layout-left .sidebar-right.sidebar-collapsed .sidebar-menu-wrapper,
body.nav-layout-right .sidebar-right.sidebar-collapsed .sidebar-menu-wrapper {
  /* top은 JavaScript에서 동적으로 설정됨 */
}

/* 접혔을 때는 sticky 제거 (좌측 및 우측 공통) - 하위 호환성 */
.col-lg-3.sidebar-collapsed .sidebar-menu,
.sidebar-left.sidebar-collapsed .sidebar-menu {
  position: static; /* sticky 해제 */
  max-height: none;
  overflow-y: visible;
}

/* 우측 사이드바 접힘 시 상단에 고정 - 하위 호환성 */
.sidebar-right.sidebar-collapsed .sidebar-menu {
  position: relative !important;
  max-height: none;
  overflow-y: visible;
}

/* 좌측 사이드바 애니메이션 (좌측에서 나타남) */
.sidebar-left .sidebar-menu.fade-right,
.sidebar-menu.fade-right,
.sidebar-left .sidebar-filter-wrap.fade-right,
.sidebar-filter-wrap.fade-right {
  animation: fadeInRight 0.6s ease forwards;
}

/* 좌측 사이드바 애니메이션 (좌측으로 사라짐) */
.sidebar-left .sidebar-menu.fade-left,
.sidebar-menu.fade-left,
.sidebar-left .sidebar-filter-wrap.fade-left,
.sidebar-filter-wrap.fade-left {
  animation: fadeOutLeft 0.6s ease forwards;
}

/* 필터 영역: 접힌 상태에서 서브메뉴와 동일하게 숨김 */
.sidebar-left.sidebar-collapsed .sidebar-filter-wrap,
.sidebar-right.sidebar-collapsed .sidebar-filter-wrap,
.col-lg-3.sidebar-collapsed .sidebar-filter-wrap {
  display: none !important;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100px);
  }
}

/* 우측 사이드바 애니메이션 (우측에서 나타남) */
.sidebar-right .sidebar-menu.fade-left,
.sidebar-right .sidebar-filter-wrap.fade-left {
  animation: fadeInLeft 0.6s ease forwards;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 우측 사이드바 애니메이션 (우측으로 사라짐) */
.sidebar-right .sidebar-menu.fade-right,
.sidebar-right .sidebar-filter-wrap.fade-right {
  animation: fadeOutRight 0.6s ease forwards;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100px);
  }
}

/* 사이드바 접힘 상태 (좌측 및 우측 공통) */
.sidebar-left.sidebar-collapsed,
.col-lg-3.sidebar-collapsed {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* 우측 사이드바 접힘 시 상단 정렬 */
.sidebar-right.sidebar-collapsed {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 100%;
  align-self: flex-start; /* 상단 정렬 */
  order: -1;
}

.sidebar-left.sidebar-collapsed .sidebar-menu .sidebar-root > *:not(.sidebar-title-wrapper),
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-root > *:not(.sidebar-title-wrapper),
.col-lg-3.sidebar-collapsed .sidebar-menu .sidebar-root > *:not(.sidebar-title-wrapper) {
  display: none !important;
}

.sidebar-left.sidebar-collapsed .sidebar-menu,
.col-lg-3.sidebar-collapsed .sidebar-menu {
  width: auto;
  min-width: auto;
}

/* 우측 사이드바 접힘 시 토글 버튼이 보이도록 최소 너비 보장 */
.sidebar-right.sidebar-collapsed .sidebar-menu {
  width: auto;
  min-width: 50px; /* 토글 버튼이 보이도록 최소 너비 보장 */
  align-self: flex-start; /* 상단 정렬 */
  height: auto !important; /* 높이 자동 조정 */
}

/* 우측 사이드바 접힘 시 sidebar-root 높이 제한 */
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-root {
  height: auto !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* 우측 정렬 */
}

/* 우측 사이드바 접힘 시 title-wrapper 스타일 조정 */
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-title-wrapper {
  padding: 8px 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.sidebar-left.sidebar-collapsed .sidebar-menu .sidebar-title-wrapper,
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-title-wrapper,
.col-lg-3.sidebar-collapsed .sidebar-menu .sidebar-title-wrapper {
  margin-bottom: 0;
}

.sidebar-left.sidebar-collapsed .sidebar-menu .sidebar-title,
.col-lg-3.sidebar-collapsed .sidebar-menu .sidebar-title {
  white-space: nowrap;
}

/* 우측 사이드바 접힘 시 토글 버튼이 보이도록 */
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-title {
  padding: 0;
  white-space: nowrap;
  display: flex !important;
  justify-content: flex-end; /* 버튼을 우측 정렬 */
  align-items: center;
}

/* 우측 사이드바 접힘 시 토글 버튼 스타일 */
.sidebar-right.sidebar-collapsed .sidebar-toggle-btn {
  transition: all 0.2s ease !important;
}

.sidebar-right.sidebar-collapsed .sidebar-toggle-btn:hover {
  background: #e8e8e8 !important;
  border-color: #d0d0d0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-right.sidebar-collapsed .sidebar-toggle-btn .sidebar-toggle-icon {
  color: #666 !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}

.sidebar-left.sidebar-collapsed .sidebar-menu .sidebar-title-text,
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-title-text,
.col-lg-3.sidebar-collapsed .sidebar-menu .sidebar-title-text {
  display: none;
}

.sidebar-left.sidebar-collapsed .sidebar-menu .sidebar-title-bar,
.sidebar-right.sidebar-collapsed .sidebar-menu .sidebar-title-bar,
.col-lg-3.sidebar-collapsed .sidebar-menu .sidebar-title-bar {
  display: none;
}

.sidebar-left.sidebar-collapsed + .col-lg-12,
.sidebar-right.sidebar-collapsed + .col-lg-12,
.col-lg-12 + .sidebar-right.sidebar-collapsed,
.col-lg-3.sidebar-collapsed + .col-lg-12 {
  transition: all 0.3s ease;
}

/* 사이드바 애니메이션 */
.sidebar-left:not(.sidebar-collapsed),
.sidebar-right:not(.sidebar-collapsed),
.col-lg-3:not(.sidebar-collapsed) {
  transition: all 0.3s ease;
}

/* 사이드바 카테고리 리스트 스타일 */
.sidebar-menu .sidebar-category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding-left: 10px;
}

.sidebar-menu .sidebar-category-item {
  border-bottom: 1px solid transparent;
}

.sidebar-menu .sidebar-category-item:last-child {
  border-bottom: none;
}

.sidebar-menu .sidebar-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--bs-accordion-btn-padding-x);
  color: #575757;
  text-decoration: none;
  font-weight: 300;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.sidebar-menu .sidebar-category-link:hover {
  color: var(--theme-color-secondary); /* 호버 시 오렌지색 */
}

.sidebar-menu .sidebar-category-item.active .sidebar-category-link {
  background-color: transparent !important;
  color: var(--theme-color-secondary) !important;
  font-weight: 700;
}

.sidebar-menu .sidebar-category-item.active .sidebar-category-link .category-name,
.sidebar-menu .sidebar-category-item.active .sidebar-category-link .category-count {
  color: var(--theme-color-secondary) !important;
  font-weight: 700;
}

.sidebar-menu .category-name {
  flex: 1;
}

.sidebar-menu .category-count {
  color: #575757;
  font-weight: 400;
  margin-left: 10px;
}

.sidebar-menu .accordion-item {
  /* border: none; */
  border-left: transparent;
  border-right: transparent;
  /* border-bottom: 1px solid #e0e0e0; */
  border-bottom: 1px solid transparent;
  border-radius: 0 !important;
}

/* 아코디언 헤더에 옅은 배경을 부여해 본문과 시각적으로 분리 */
.sidebar-menu .accordion-header {
  background: var(--theme-color-secondary);
  color: #fff;
}


/* 사이드바 모든 border 투명 처리 */
.sidebar-menu .accordion-button,
.sidebar-menu .accordion-button:focus,
.sidebar-menu .accordion-button:not(.collapsed),
.sidebar-menu .accordion-collapse,
.sidebar-menu .accordion-body {
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 사이드바 아코디언 포커스/active 스타일 */
.sidebar-menu .accordion-button:focus,
.sidebar-menu .accordion-button:not(.collapsed),
.sidebar-menu .accordion-button.active {
  background-color: var(--theme-color-secondary) !important;
  color: #fff !important;
}

.sidebar-menu .accordion-button:focus span,
.sidebar-menu .accordion-button:not(.collapsed) span,
.sidebar-menu .accordion-button.active span {
  color: #fff !important;
}