/* Global dropdown styling fixes */

/* Make dropdown panels scrollable */
.cdk-overlay-pane:not(.mat-mdc-dialog-panel):not(.analysis-dialog-panel):not(.license-renewal-modal) {
  max-height: 350px !important;
}

.mat-mdc-select-panel,
.mat-mdc-autocomplete-panel,
.trend-select-panel,
.scrollable-dropdown-panel {
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-width: 220px !important;
  margin-top: 5px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Custom scrollbar styling for dropdowns */
.mat-mdc-select-panel::-webkit-scrollbar,
.mat-mdc-autocomplete-panel::-webkit-scrollbar,
.trend-select-panel::-webkit-scrollbar,
.scrollable-dropdown-panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.mat-mdc-select-panel::-webkit-scrollbar-track,
.mat-mdc-autocomplete-panel::-webkit-scrollbar-track,
.trend-select-panel::-webkit-scrollbar-track,
.scrollable-dropdown-panel::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.mat-mdc-select-panel::-webkit-scrollbar-thumb,
.mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb,
.trend-select-panel::-webkit-scrollbar-thumb,
.scrollable-dropdown-panel::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.mat-mdc-select-panel::-webkit-scrollbar-thumb:hover,
.mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover,
.trend-select-panel::-webkit-scrollbar-thumb:hover,
.scrollable-dropdown-panel::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Ensure dropdown options have proper spacing and alignment */
.mat-mdc-option {
  min-height: 48px !important;
  padding: 12px 16px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}

.mat-mdc-option .mat-option-text,
.mat-mdc-option .mat-mdc-option-text {
  display: flex !important;
  align-items: center !important;
}

/* Space between icon and text in dropdown items */
.mat-mdc-option mat-icon,
.mat-mdc-option .mat-icon {
  margin-right: 8px !important;
}

/* Specific styles for dropdown options with icons */
.metric-option,
.period-option,
.chart-type-option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  white-space: nowrap !important;
}

.metric-option mat-icon,
.period-option mat-icon,
.chart-type-option mat-icon,
.metric-option .mat-icon,
.period-option .mat-icon,
.chart-type-option .mat-icon {
  font-size: 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin-right: 8px !important;
}

.metric-option mat-icon,
.period-option mat-icon,
.chart-type-option mat-icon {
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}
    
.metric-option span,
.period-option span,
.chart-type-option span {
  flex-grow: 1 !important;
  white-space: nowrap !important;
}