/**
 * BASIC LWC COMPONENT TEMPLATE - CSS
 *
 * CSS in LWC is automatically scoped to the component.
 * Use SLDS (Salesforce Lightning Design System) classes when possible.
 *
 * CSS Custom Properties (variables) can be exposed for theming.
 */

/* Host element styling */
:host {
  display: block;
}

/* Custom properties for theming */
:host {
  --card-background: var(--lwc-colorBackground, #ffffff);
  --card-border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
  --item-hover-background: var(--lwc-colorBackgroundRowHover, #f3f3f3);
}

/* List item hover effect */
.slds-item:hover {
  background-color: var(--item-hover-background);
  cursor: pointer;
}

/* Smooth transitions */
.slds-tile {
  transition: background-color 0.2s ease;
}

/* Loading state fade */
.slds-spinner {
  opacity: 0.8;
}

/* Error state styling */
.slds-alert_error {
  border-radius: var(--card-border-radius);
}

/* Empty state styling */
.empty-state {
  padding: 2rem;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .slds-tile__detail {
    padding: 0.5rem;
  }

  .slds-text-heading_small {
    font-size: 0.875rem;
  }
}

/* Focus states for accessibility */
a:focus {
  outline: 2px solid var(--lwc-colorBorderBrand, #1589ee);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .slds-item:hover {
    background-color: highlight;
  }
}
