/**
 * TypeScript Component Styles
 *
 * Uses SLDS 2 global styling hooks for dark mode compatibility.
 * All colors are CSS variables - no hardcoded values.
 */

/* Container styling */
:host {
  display: block;
}

/* List item hover effect */
.slds-item {
  transition: background-color 0.15s ease-in-out;
  border-radius: var(--slds-g-radius-border-2, 0.25rem);
}

.slds-item:hover {
  background-color: var(--slds-g-color-surface-container-1, #f3f3f3);
}

/* Link reset enhancement */
.slds-text-link_reset:hover {
  text-decoration: none;
}

/* Selected state */
.slds-item.is-selected {
  background-color: var(--slds-g-color-brand-1, #0176d3);
  color: var(--slds-g-color-on-brand, #ffffff);
}

/* Revenue formatting */
.revenue-positive {
  color: var(--slds-g-color-success-1, #2e844a);
}

.revenue-negative {
  color: var(--slds-g-color-error-1, #ba0517);
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--slds-g-color-surface-1, rgba(255, 255, 255, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Description list styling */
.slds-list_horizontal dt {
  min-width: 5rem;
}

/* Empty state icon */
.empty-state-icon {
  color: var(--slds-g-color-on-surface-2, #706e6b);
}
