/**
 * Funky.SelectableList Styles (Core Module)
 * 
 * Foundational styles for accessible list component.
 * Used by CommandPalette, SideNav, WidgetCatalog and other components.
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Container */
  --list-bg: transparent;
  --list-border-radius: var(--pro-radius-md, 6px);
  --list-border: none;
  --list-shadow: none;
  --list-max-height: 400px;
  
  /* Item sizing */
  --list-item-height: 40px;
  --list-item-min-height: 36px;
  --list-item-padding-x: var(--pro-space-3, 12px);
  --list-item-padding-y: var(--pro-space-2, 8px);
  --list-item-gap: 0;
  --list-item-border-radius: 0;
  
  /* Item colors - normal */
  --list-item-bg: transparent;
  --list-item-text: var(--pro-text-primary, #212529);
  --list-item-text-secondary: var(--pro-text-secondary, #6c757d);
  --list-item-icon: var(--pro-text-secondary, #6c757d);
  --list-item-border: transparent;
  
  /* Item colors - hover */
  --list-item-bg-hover: var(--pro-bg-secondary, rgba(0, 0, 0, 0.05));
  --list-item-text-hover: var(--pro-text-primary, #212529);
  
  /* Item colors - focused */
  --list-item-bg-focused: var(--pro-bg-tertiary, rgba(0, 0, 0, 0.08));
  --list-item-text-focused: var(--pro-text-primary, #212529);
  
  /* Item colors - selected */
  --list-item-bg-selected: var(--pro-accent-primary, #007bff);
  --list-item-text-selected: var(--pro-text-on-accent, #ffffff);
  --list-item-icon-selected: var(--pro-text-on-accent, #ffffff);
  
  /* Item colors - disabled */
  --list-item-bg-disabled: transparent;
  --list-item-text-disabled: var(--pro-text-tertiary, #adb5bd);
  --list-item-opacity-disabled: 0.6;
  
  /* Focus ring - inherit from global focus ring variables */
  --list-focus-ring-color: var(--focus-ring-color, var(--pro-accent-primary, #007bff));
  --list-focus-ring-width: var(--focus-ring-width, 2px);
  --list-focus-ring-offset: var(--focus-ring-offset-inset, -2px);
  --list-focus-ring-style: var(--focus-ring-style, solid);
  --list-focus-ring-shadow: var(--focus-ring-shadow-inset, none);
  
  /* Group headers */
  --list-group-bg: var(--pro-bg-tertiary, #f8f9fa);
  --list-group-text: var(--pro-text-secondary, #6c757d);
  --list-group-font-size: 0.75rem;
  --list-group-font-weight: 600;
  --list-group-padding-x: var(--pro-space-3, 12px);
  --list-group-padding-y: var(--pro-space-2, 8px);
  --list-group-letter-spacing: 0.05em;
  --list-group-text-transform: uppercase;
  
  /* Empty state */
  --list-empty-padding: var(--pro-space-6, 24px);
  --list-empty-text: var(--pro-text-tertiary, #6c757d);
  --list-empty-icon-size: 2rem;
  --list-empty-icon-opacity: 0.5;
  
  /* Scrollbar (webkit) */
  --list-scrollbar-width: 8px;
  --list-scrollbar-track: transparent;
  --list-scrollbar-thumb: var(--pro-border-color, #dee2e6);
  --list-scrollbar-thumb-hover: var(--pro-text-tertiary, #adb5bd);
  
  /* Animation */
  --list-transition-duration: 0.15s;
  --list-transition-timing: ease;
}

/* ==========================================================================
   Container
   ========================================================================== */

.selectable-list {
  display: flex;
  flex-direction: column;
  gap: var(--list-item-gap);
  max-height: var(--list-max-height);
  background: var(--list-bg);
  border: var(--list-border);
  border-radius: var(--list-border-radius);
  box-shadow: var(--list-shadow);
  outline: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Scrollbar styling (webkit) */
.selectable-list::-webkit-scrollbar {
  width: var(--list-scrollbar-width);
}

.selectable-list::-webkit-scrollbar-track {
  background: var(--list-scrollbar-track);
}

.selectable-list::-webkit-scrollbar-thumb {
  background: var(--list-scrollbar-thumb);
  border-radius: calc(var(--list-scrollbar-width) / 2);
}

.selectable-list::-webkit-scrollbar-thumb:hover {
  background: var(--list-scrollbar-thumb-hover);
}

/* Focus visible on container */
.selectable-list:focus-visible {
  outline: var(--list-focus-ring-width) var(--list-focus-ring-style) var(--list-focus-ring-color);
  outline-offset: var(--list-focus-ring-offset);
  box-shadow: var(--list-focus-ring-shadow);
}

/* ==========================================================================
   Items
   ========================================================================== */

.selectable-list__item {
  display: flex;
  align-items: center;
  min-height: var(--list-item-min-height);
  padding: var(--list-item-padding-y) var(--list-item-padding-x);
  background: var(--list-item-bg);
  color: var(--list-item-text);
  border-bottom: 1px solid var(--list-item-border);
  border-radius: var(--list-item-border-radius);
  cursor: pointer;
  user-select: none;
  transition: 
    background-color var(--list-transition-duration) var(--list-transition-timing),
    color var(--list-transition-duration) var(--list-transition-timing);
}

/* Last item no border */
.selectable-list__item:last-child {
  border-bottom-color: transparent;
}

.selectable-list__item:hover:not(.is-disabled) {
  background: var(--list-item-bg-hover);
  color: var(--list-item-text-hover);
}

/* Focused state (keyboard navigation) */
.selectable-list__item.is-focused {
  background: var(--list-item-bg-focused);
  color: var(--list-item-text-focused);
  outline: var(--list-focus-ring-width) var(--list-focus-ring-style) var(--list-focus-ring-color);
  outline-offset: var(--list-focus-ring-offset);
  box-shadow: var(--list-focus-ring-shadow);
  z-index: 1;
}

/* Selected state */
.selectable-list__item.is-selected {
  background: var(--list-item-bg-selected);
  color: var(--list-item-text-selected);
}

.selectable-list__item.is-selected .selectable-list__item-icon {
  color: var(--list-item-icon-selected);
}

/* Selected + focused */
.selectable-list__item.is-selected.is-focused {
  outline-color: var(--pro-text-on-accent, #ffffff);
}

/* Disabled state */
.selectable-list__item.is-disabled {
  background: var(--list-item-bg-disabled);
  color: var(--list-item-text-disabled);
  opacity: var(--list-item-opacity-disabled);
  cursor: not-allowed;
}

.selectable-list__item.is-disabled:hover {
  background: var(--list-item-bg-disabled);
}

/* ==========================================================================
   Item Content Elements
   ========================================================================== */

.selectable-list__item-icon {
  flex-shrink: 0;
  width: 20px;
  margin-right: var(--pro-space-2, 8px);
  color: var(--list-item-icon);
  text-align: center;
}

.selectable-list__item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selectable-list__item-secondary {
  margin-left: var(--pro-space-2, 8px);
  color: var(--list-item-text-secondary);
  font-size: 0.875em;
}

.selectable-list__item-badge {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: var(--pro-radius-sm, 4px);
  background: var(--pro-bg-secondary, #e9ecef);
  color: var(--pro-text-secondary, #6c757d);
}

/* ==========================================================================
   Groups
   ========================================================================== */

.selectable-list__group {
  display: flex;
  flex-direction: column;
}

.selectable-list__group + .selectable-list__group {
  margin-top: var(--pro-space-2, 8px);
}

.selectable-list__group-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--list-group-padding-y) var(--list-group-padding-x);
  background: var(--list-group-bg);
  color: var(--list-group-text);
  font-size: var(--list-group-font-size);
  font-weight: var(--list-group-font-weight);
  letter-spacing: var(--list-group-letter-spacing);
  text-transform: var(--list-group-text-transform);
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.selectable-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--list-empty-padding);
  text-align: center;
  color: var(--list-empty-text);
}

.selectable-list__empty-icon {
  font-size: var(--list-empty-icon-size);
  opacity: var(--list-empty-icon-opacity);
  margin-bottom: var(--pro-space-3, 12px);
}

.selectable-list__empty-text {
  margin: 0;
  font-size: 0.875rem;
}

/* ==========================================================================
   Density Modes
   ========================================================================== */

/* Compact */
[data-density="compact"] .selectable-list,
.selectable-list--compact {
  --list-item-height: 32px;
  --list-item-min-height: 28px;
  --list-item-padding-x: var(--pro-space-2, 8px);
  --list-item-padding-y: var(--pro-space-1, 4px);
  --list-group-padding-x: var(--pro-space-2, 8px);
  --list-group-padding-y: var(--pro-space-1, 4px);
  --list-empty-padding: var(--pro-space-4, 16px);
  --list-group-header-padding: var(--pro-space-1, 4px) var(--pro-space-2, 8px);
}

/* Comfortable */
[data-density="comfortable"] .selectable-list,
.selectable-list--comfortable {
  --list-item-height: 48px;
  --list-item-min-height: 44px;
  --list-item-padding-x: var(--pro-space-4, 16px);
  --list-item-padding-y: var(--pro-space-3, 12px);
  --list-group-padding-x: var(--pro-space-4, 16px);
  --list-group-padding-y: var(--pro-space-3, 12px);
  --list-empty-padding: var(--pro-space-8, 32px);
}

/* ==========================================================================
   Variant Styles
   ========================================================================== */

/* Bordered items */
.selectable-list--bordered {
  --list-item-border: var(--pro-border-color, #dee2e6);
  --list-item-border-radius: var(--pro-radius-sm, 4px);
  --list-item-gap: var(--pro-space-1, 4px);
}

/* Card style */
.selectable-list--cards {
  --list-item-bg: var(--pro-bg-primary, #ffffff);
  --list-item-border-radius: var(--pro-radius-md, 6px);
  --list-item-gap: var(--pro-space-2, 8px);
}

.selectable-list--cards .selectable-list__item {
  box-shadow: var(--pro-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  border: 1px solid var(--pro-border-color, #dee2e6);
}

/* Striped */
.selectable-list--striped .selectable-list__item:nth-child(even) {
  background: var(--list-stripe-bg, var(--pro-bg-tertiary, rgba(0, 0, 0, 0.04)));
}

.selectable-list--striped .selectable-list__item:nth-child(even):hover:not(.is-disabled) {
  background: var(--list-item-bg-hover);
}

/* Striped - selected state must override stripe background */
.selectable-list--striped .selectable-list__item.is-selected,
.selectable-list--striped .selectable-list__item:nth-child(even).is-selected {
  background: var(--list-item-bg-selected);
  color: var(--list-item-text-selected);
}

/* Striped dark theme - ensure visibility */
[data-theme="dark"] .selectable-list--striped .selectable-list__item:nth-child(even) {
  background: var(--list-stripe-bg, rgba(255, 255, 255, 0.03));
}

/* Striped dark theme - selected must still override */
[data-theme="dark"] .selectable-list--striped .selectable-list__item.is-selected,
[data-theme="dark"] .selectable-list--striped .selectable-list__item:nth-child(even).is-selected {
  background: var(--list-item-bg-selected);
  color: var(--list-item-text-selected);
}

/* ==========================================================================
   Selection Checkbox Variant
   ========================================================================== */

/* Checkbox variant for multi-select lists */
.selectable-list--checkboxes .selectable-list__item::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin-right: var(--pro-space-2, 8px);
  border: 2px solid var(--pro-border-color, #dee2e6);
  border-radius: 3px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  background-color: transparent;
}

.selectable-list--checkboxes .selectable-list__item.is-selected::before {
  background-color: var(--pro-accent-primary, #007bff);
  border-color: var(--pro-accent-primary, #007bff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Checkbox variant - selected text should not change color */
.selectable-list--checkboxes .selectable-list__item.is-selected {
  background: var(--list-item-bg-hover);
  color: var(--list-item-text);
}

/* Checkbox variant hover on checkbox */
.selectable-list--checkboxes .selectable-list__item:hover::before {
  border-color: var(--pro-accent-primary, #007bff);
}

/* ==========================================================================
   Range Selection Visual
   ========================================================================== */

.selectable-list__item.is-in-range {
  background: var(--list-item-bg-focused);
}

/* ==========================================================================
   Accessibility (Phase 4)
   ========================================================================== */

/* Screen reader only - visually hidden but accessible */
.sr-only,
.selectable-list__live-region {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Focus visible indicators for keyboard users */
.selectable-list:focus-visible {
  outline: var(--list-focus-ring-width) var(--list-focus-ring-style) var(--list-focus-ring-color);
  outline-offset: var(--list-focus-ring-offset);
  box-shadow: var(--list-focus-ring-shadow);
}

/* High contrast mode support */
@media (forced-colors: active) {
  .selectable-list__item.is-selected {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .selectable-list__item.is-focused {
    --list-focus-ring-width: 2px;
    --list-focus-ring-color: ButtonText;
  }

  .selectable-list:focus-visible {
    --list-focus-ring-width: 2px;
    --list-focus-ring-color: ButtonText;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .selectable-list,
  .selectable-list__item {
    transition: none !important;
  }
  
  .selectable-list {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Theme Overrides
   The base styles use --pro-* variables which are automatically themed
   via themes.css. These overrides handle edge cases.
   ========================================================================== */

/* Dark theme scrollbar adjustments */
[data-theme="dark"] .selectable-list::-webkit-scrollbar-track,
.selectable-list--dark::-webkit-scrollbar-track {
  background: var(--pro-bg-secondary, #252525);
}

[data-theme="dark"] .selectable-list::-webkit-scrollbar-thumb,
.selectable-list--dark::-webkit-scrollbar-thumb {
  background: var(--pro-border-color, #555555);
}

[data-theme="dark"] .selectable-list::-webkit-scrollbar-thumb:hover,
.selectable-list--dark::-webkit-scrollbar-thumb:hover {
  background: var(--pro-text-secondary, #777777);
}

/* Dark theme checkbox adjustments */
[data-theme="dark"] .selectable-list--checkboxes .selectable-list__item::before,
.selectable-list--dark.selectable-list--checkboxes .selectable-list__item::before {
  border-color: var(--pro-border-color, #555555);
}

/* ==========================================================================
   BOOTSTRAP LIST GROUP THEME OVERRIDES
   Using --pro-* variables for theme consistency
   ========================================================================== */

.list-group-item {
  background-color: var(--pro-bg-secondary);
  border-color: var(--pro-border);
  color: var(--pro-text-primary);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--pro-bg-tertiary);
  color: var(--pro-text-primary);
}

.list-group-item.active {
  background-color: var(--pro-primary);
  border-color: var(--pro-primary);
}

/* ==========================================================================
   PLAYGROUND DEMO STYLES
   ========================================================================== */

.selectable-list-demo__container {
  max-width: 400px;
  margin: 0 auto;
}

.selectable-list-demo__list {
  min-height: 300px;
  border: 1px solid var(--pro-border-color, #30363d);
  border-radius: var(--pro-border-radius, 6px);
  background: var(--pro-bg-secondary, #161b22);
}

/* Item content layout */
.selectable-list-demo__item-icon {
  flex-shrink: 0;
  width: 24px;
  margin-right: 0.75rem;
  color: var(--pro-text-muted, #8b949e);
  text-align: center;
}

.selectable-list-demo__item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.selectable-list-demo__item-label {
  font-weight: 500;
  color: var(--pro-text-primary, #e6edf3);
}

.selectable-list-demo__item-category {
  font-size: 0.75rem;
  color: var(--pro-text-muted, #8b949e);
}

/* Selected state adjustments */
.selectable-list__item.is-selected .selectable-list-demo__item-icon,
.selectable-list__item.is-selected .selectable-list-demo__item-label,
.selectable-list__item.is-selected .selectable-list-demo__item-category {
  color: var(--list-item-text-selected, #ffffff);
}

/* Selection status display */
.selectable-list-demo__status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.selectable-list-demo__status-label {
  font-weight: 600;
  color: var(--pro-text-primary, #e6edf3);
}

.selectable-list-demo__status-value {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* API Controls */
.selectable-list-demo__controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.selectable-list-demo__control-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.selectable-list-demo__control-label {
  font-weight: 500;
  color: var(--pro-text-secondary, #8b949e);
  min-width: 80px;
}

/* Keyboard shortcuts */
.selectable-list-demo__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.selectable-list-demo__shortcut {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--pro-text-secondary, #8b949e);
}

.selectable-list-demo__shortcut kbd {
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-family: var(--pro-font-mono, monospace);
  background: var(--pro-bg-tertiary, #21262d);
  border: 1px solid var(--pro-border-color, #30363d);
  border-radius: 4px;
  color: var(--pro-text-primary, #e6edf3);
}

/* Settings display */
.selectable-list-demo__settings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.selectable-list-demo__settings .badge {
  font-weight: 400;
}

.selectable-list-demo__settings .badge strong {
  font-weight: 600;
}

/* Light theme adjustments */
[data-theme="light"] .selectable-list-demo__list {
  background: var(--pro-bg-secondary, #f6f8fa);
  border-color: var(--pro-border-color, #d0d7de);
}

[data-theme="light"] .selectable-list-demo__shortcut kbd {
  background: var(--pro-bg-tertiary, #eaeef2);
  border-color: var(--pro-border-color, #d0d7de);
}

/* Responsive */
@media (max-width: 576px) {
  .selectable-list-demo__container {
    max-width: 100%;
  }

  .selectable-list-demo__control-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .selectable-list-demo__control-label {
    min-width: auto;
  }

  .selectable-list-demo__shortcuts {
    flex-direction: column;
  }
}