/* Issue Metrics Chart Component Styles */

/* Base Legend Item Styles - replaces massive inline style duplication */
.legend-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sl-spacing-small);
  cursor: pointer;
  padding: var(--sl-spacing-small);
  border-radius: var(--sl-border-radius-pill);
  position: relative;
  height: 40px;
  align-self: stretch;
  justify-self: stretch;
  transition: background-color 0.2s ease;
}

/* Default legend item background */
.legend-item.total-issues {
  background-color: var(--sl-color-neutral-100);
}

/* Legend Item Hover States - using same color map as JavaScript */
.legend-item:hover {
  background-color: var(--sl-color-neutral-100) !important;
}

.legend-item[data-ring-type="valid-issues"]:hover,
.legend-item[data-ring-id*="valid-issues"]:hover {
  background-color: var(--sl-color-success-100) !important;
}

.legend-item[data-ring-type="false-positives"]:hover,
.legend-item[data-ring-id*="false-positives"]:hover {
  background-color: var(--sl-color-warning-100) !important;
}

.legend-item[data-ring-type="hallucinations"]:hover,
.legend-item[data-ring-id*="hallucinations"]:hover {
  background-color: var(--sl-color-purple-100) !important;
}

.legend-item[data-ring-type="interaction-required"]:hover,
.legend-item[data-ring-id*="interaction-required"]:hover {
  background-color: var(--sl-color-blue-100) !important;
}

/* Legend Icon Container - replaces inline icon span styles */
.legend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Icon color variants */
.legend-icon.neutral { background-color: var(--sl-color-neutral-400); }
.legend-icon.success { background-color: var(--sl-color-success-600); }
.legend-icon.warning { background-color: var(--sl-color-warning-600); }
.legend-icon.purple { background-color: var(--sl-color-purple-600); }
.legend-icon.blue { background-color: var(--sl-color-blue-600); }

/* Legend icon styling */
.legend-icon sl-icon {
  color: white;
  font-size: var(--sl-font-size-small);
}

.legend-icon.interaction-required sl-icon {
  font-size: var(--sl-font-size-x-small);
}

/* Legend Text - replaces inline text span styles */
.legend-text {
  font-size: var(--sl-font-size-small);
  color: var(--sl-color-neutral-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Legend Wrapper - Local legend container */
.legend-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sl-spacing-2x-small);
}

/* Radial Chart + Legend Layout */
.radial-chart-legend-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin-top: var(--sl-spacing-3x-large);
  margin-bottom: var(--sl-spacing-x-large);
}

/* When legend is hidden, adjust wrapper margins */
issue-metrics-chart[show-legend="false"] .radial-chart-legend-wrapper {
  margin-top: var(--sl-spacing-small);
  margin-bottom: var(--sl-spacing-small);
}

/* Global Legend Wrapper - Desktop */
.global-legend-wrapper {
  display: flex;
  gap: var(--sl-spacing-small);
  justify-content: center;
  align-items: center;
  overflow-x: auto;
  padding: var(--sl-spacing-2x-small) 0px;
}

/* Mobile Global Legend Wrapper */
.mobile-global-legend-wrapper {
  display: flex;
  width: 100%;
  gap: var(--sl-spacing-x-small);
  overflow-x: auto;
  justify-content: start;
  align-items: center;
  background-color: white;
  padding: var(--sl-spacing-2x-small);
  border-radius: var(--sl-border-radius-pill);
  border: 1px solid var(--sl-color-neutral-200);
  box-shadow: var(--sl-shadow-large);
}

/* Mobile Chart View Controls */
.mobile-chart-view-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-spacing-medium);
}

/* Mobile Comparison Header */
.mobile-comparison-header {
  display: none;
}

/* Bar Chart Styles */
.bar-chart-total-header {
  text-align: center;
  margin-bottom: var(--sl-spacing-small);
}

.bar-chart-total-text {
  font-size: var(--sl-font-size-small);
  color: var(--sl-color-neutral-700);
  font-weight: var(--sl-font-weight-semibold);
}

.bar-chart {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 240px;
  gap: var(--sl-spacing-small);
  padding: var(--sl-spacing-medium);
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sl-spacing-2x-small);
  flex: 1;
}

.vertical-bar-container {
  height: 200px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: var(--sl-color-neutral-50);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.interactive-bar {
  width: 56px;
  border-radius: var(--sl-border-radius-small);
  transition: opacity 0.3s ease, background-color 0.2s ease;
  position: relative;
  pointer-events: none;
  min-height: 4px;
  box-shadow: var(--sl-shadow-small);
}

.interactive-bar:hover {
  box-shadow: var(--sl-shadow-medium);
}

.bar-count-label {
  font-size: var(--sl-font-size-x-small);
  color: var(--sl-color-neutral-600);
  text-align: center;
  font-weight: var(--sl-font-weight-semibold);
}

/* View Mode Toggle Styling */
.view-mode-toggle {
  display: flex;
  align-items: center;
}

.view-mode-btn::part(base) {
  background-color: var(--sl-color-neutral-0);
  color: var(--sl-color-neutral-700);
  border: 1px solid var(--sl-color-neutral-200);
  transition: all 0.2s ease;
  box-shadow: var(--sl-shadow-small);
}

.view-mode-btn:hover::part(base) {
  background-color: var(--sl-color-primary-50);
  border-color: var(--sl-color-primary-300);
  color: var(--sl-color-neutral-1000);
}

.view-mode-btn.active::part(base) {
  background-color: var(--sl-color-primary-600);
  border-color: var(--sl-color-primary-600);
  color: var(--sl-color-neutral-0);
}

.view-mode-btn.active:hover::part(base) {
  background-color: var(--sl-color-primary-500);
  border-color: var(--sl-color-primary-500);
}

/* Chart Layout Sections */
.radial-chart-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sl-spacing-medium);
  margin-bottom: var(--sl-spacing-2x-small);
}

/* Chart Type Toggle Display Rules */
.comparison-grid issue-metrics-chart .view-toggle {
  display: none;
}

.radial-chart-section issue-metrics-chart .view-toggle {
  display: flex;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Hide desktop legend, show mobile version */
  .global-legend-wrapper {
    display: none;
  }

  .mobile-comparison-header {
    display: flex;
    flex-direction: column-reverse;
    overflow-x: auto;
    position: fixed;
    padding: var(--sl-spacing-x-small) var(--sl-spacing-x-small) var(--sl-spacing-large);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(2px);
    gap: var(--sl-spacing-x-small);
  }

  #clear-selection {
    padding-left: 0px;
    box-shadow: var(--sl-shadow-medium);
  }

  #clear-selection sl-button::part(base) {
    background-color: var(--sl-color-neutral-200);
  }

  /* Mobile legend item adjustments */
  .legend-item {
    height: auto;
    padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
    gap: var(--sl-spacing-x-small);
  }

  /* Mobile legend icon adjustments */
  .legend-icon {
    width: 16px;
    height: 16px;
  }

  /* Mobile legend text adjustments */
  .legend-text {
    font-size: var(--sl-font-size-x-small);
  }
}

@media (max-width: 600px) {
  /* Responsive legend layout for smaller screens */
  .radial-chart-legend-wrapper {
    flex-direction: column-reverse;
    gap: var(--sl-spacing-medium);
  }

  .legend-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-2x-small);
    width: 100%;
  }

  .legend-item {
    width: 100%;
  }
}