/* === Wrapper === */
.sectionTitleIcon {
  color: var(--vscode-icon-foreground);
  font-size: 16px;
  margin-right: 8px;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 5px; /* pill shape */
  background: var(--vscode-badge-background);
  color: var(--vscode-badge-foreground);
  border: 1px solid var(--vscode-badge-border, transparent);
  line-height: 1;
  user-select: none;
}

.functionsWrapper {
  margin: 8px;
  border-radius: 4px;
  background-color: var(--vscode-editor-background);
  border: 1px solid var(--vscode-panel-border, transparent);
}

.sectionHeader {
  position: sticky;
  top: 0;
  z-index: 5; /* keep above list items */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--vscode-editor-background); /* matches VS Code panels */
  border-bottom: 1px solid
    var(--vscode-panel-border, var(--vscode-editorGroup-border));
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sectionTitle:hover {
  background-color: var(--vscode-list-hoverBackground);
}

.sectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  font-weight: 600;
  color: var(--vscode-foreground);
}

.sectionTitleIcon {
  font-size: 14px;
  opacity: 0.8;
}

.functionsWrapperDisabled {
  opacity: 0.7;
  pointer-events: none;
}

/* === Function list === */
.functionList {
  list-style: none;
  transition:
    max-height 0.3s ease,
    opacity 0.2s ease;
  overflow: hidden;
}
.functionList.expanded {
  max-height: 300px;
  opacity: 1;
  overflow-y: auto;
  margin: 8px 0;
  padding: 0 16px;
}
.functionList.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* === Class Section === */
.classSection {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.classHeader {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: color-mix(
    in srgb,
    var(--vscode-list-inactiveSelectionBackground) 60%,
    transparent
  );
  cursor: pointer;
  transition: all 0.25s ease;
  gap: 8px;
  position: relative;
}

.classHeader:hover {
  background-color: var(--vscode-list-hoverBackground);
}

.classToggle {
  transition: transform 0.3s ease;
}
.expanded .classToggle {
  transform: rotate(90deg);
}

.classIcon {
  color: var(--vscode-descriptionForeground);
  opacity: 0.5;
}

.className {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.methodCount {
  font-size: 0.8em;
}

/* === Methods List === */
.methodsList {
  list-style: none;
  padding: 0 0 0 32px;
  margin: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.methodsList::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  width: 1px;
  background-color: var(--vscode-editorIndentGuide-background);
}

/* === Function Item === */
.functionItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin: 3px 0;
  border-radius: 4px;
  background-color: var(--vscode-editor-background);
  border: 1px solid transparent;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.functionItem:hover {
  background-color: var(--vscode-list-hoverBackground);
}

.functionItemHighlighted {
  background-color: var(--vscode-list-activeSelectionBackground);
  color: var(--vscode-list-activeSelectionForeground);
  border-color: var(
    --vscode-focusBorder,
    var(--vscode-list-activeSelectionBackground)
  );
}

.functionItemContent {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  border-radius: 4px;
  padding: 2px;
  transition: all 0.2s ease;
}

.functionIcon {
  flex-shrink: 0;
  opacity: 0.4;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.functionItem:hover .functionIcon {
  opacity: 0.6;
}

.methodItem .functionIcon,
.standaloneFunctionItem .functionIcon {
  color: var(--vscode-descriptionForeground);
}

.functionName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  min-width: 50px;
  position: relative;
}

/* === Status States === */
.functionItemOptimizing {
  opacity: 0.8;
  background-color: var(
    --vscode-editor-inactiveSelectionBackground,
    rgba(128, 128, 128, 0.1)
  );
}

.functionItemOptimizationHighlight {
  background-color: var(--vscode-activityBarBadge-background);
  color: var(--vscode-activityBarBadge-foreground);
  border: 2px solid var(--vscode-activityBarBadge-background);
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  animation: optimizationGlow 2s ease-in-out infinite;
}

.functionItemOptimizationHighlight .optimizeButton {
  background-color: var(--vscode-activityBarBadge-foreground);
  color: var(--vscode-activityBarBadge-background);
  font-weight: 600;
}

@keyframes optimizationGlow {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 123, 255, 0.6);
  }
}

/* === Optimize Button === */
.optimizeButton {
  background: var(--vscode-button-background);
  color: var(--vscode-button-foreground);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.8em;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 60px;
  margin-left: 8px;
  flex-shrink: 0;
  opacity: 0.7;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

.optimizeButton:hover:not(:disabled) {
  border-color: var(--vscode-badge-background);
  background: var(--vscode-badge-background);
  color: var(--vscode-badge-foreground);
  opacity: 0.9;
}

.optimizeButton:active:not(:disabled) {
  border-color: var(--vscode-focusBorder);
  opacity: 1;
}

.optimizeButton:disabled {
  background: color-mix(
    in srgb,
    var(--vscode-badge-background) 40%,
    transparent
  );
  color: var(--vscode-badge-foreground);
  cursor: not-allowed;
}
