@use 'ui-design-system/src/styles/semantic/index' as *;

.ui-kanban-board {
  // Core Structure
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  
  // Layout & Spacing
  padding: $semantic-spacing-layout-section-md;
  gap: $semantic-spacing-layout-section-sm;
  
  // Visual Design
  background: $semantic-color-surface;
  border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  border-radius: $semantic-border-radius-lg;
  
  // Size Variants
  &--sm {
    padding: $semantic-spacing-layout-section-xs;
    gap: $semantic-spacing-layout-section-xs;
  }
  
  &--md {
    padding: $semantic-spacing-layout-section-sm;
    gap: $semantic-spacing-layout-section-sm;
  }
  
  &--lg {
    padding: $semantic-spacing-layout-section-md;
    gap: $semantic-spacing-layout-section-md;
  }
  
  // Disabled State
  &--disabled {
    opacity: $semantic-opacity-disabled;
    pointer-events: none;
  }
  
  // Header Section
  &__header {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-content-line-tight;
    margin-bottom: $semantic-spacing-layout-section-sm;
  }
  
  &__title {
    margin: 0;
    font-family: map-get($semantic-typography-heading-h2, font-family);
    font-size: map-get($semantic-typography-heading-h2, font-size);
    font-weight: map-get($semantic-typography-heading-h2, font-weight);
    line-height: map-get($semantic-typography-heading-h2, line-height);
    color: $semantic-color-text-primary;
  }
  
  &__subtitle {
    margin: 0;
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: map-get($semantic-typography-body-medium, font-weight);
    line-height: map-get($semantic-typography-body-medium, line-height);
    color: $semantic-color-text-secondary;
  }
  
  // Columns Container
  &__columns {
    display: flex;
    gap: $semantic-spacing-grid-gap-md;
    overflow-x: auto;
    flex: 1;
    padding-bottom: $semantic-spacing-component-sm;
    
    // Scroll styling
    scrollbar-width: thin;
    scrollbar-color: $semantic-color-border-primary $semantic-color-surface-secondary;
    
    &::-webkit-scrollbar {
      height: 8px;
    }
    
    &::-webkit-scrollbar-track {
      background: $semantic-color-surface-secondary;
      border-radius: $semantic-border-radius-sm;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-primary;
      border-radius: $semantic-border-radius-sm;
    }
    
    &::-webkit-scrollbar-thumb:hover {
      background: $semantic-color-border-secondary;
    }
  }
  
  // Individual Column
  &__column {
    display: flex;
    flex-direction: column;
    min-width: 280px;
    max-width: 350px;
    flex: 1;
    
    // Visual Design
    background: $semantic-color-surface-secondary;
    border: $semantic-border-width-1 solid $semantic-color-border-secondary;
    border-radius: $semantic-border-radius-md;
    box-shadow: $semantic-shadow-elevation-1;
    
    // Transitions
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    // States
    &--disabled {
      opacity: $semantic-opacity-disabled;
      background: $semantic-color-surface-container;
    }
    
    &--full {
      background: $semantic-color-surface-elevated;
      border-color: $semantic-color-border-primary;
    }
    
    // Drag over effect
    &[data-drag-over="true"] {
      border-color: $semantic-color-primary;
      box-shadow: $semantic-shadow-elevation-2;
      background: $semantic-color-surface-elevated;
    }
  }
  
  // Column Header
  &__column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $semantic-spacing-component-md;
    border-bottom: $semantic-border-width-1 solid $semantic-color-border-subtle;
    background: $semantic-color-surface-primary;
    border-radius: $semantic-border-radius-md $semantic-border-radius-md 0 0;
  }
  
  &__column-title {
    margin: 0;
    font-family: map-get($semantic-typography-heading-h4, font-family);
    font-size: map-get($semantic-typography-heading-h4, font-size);
    font-weight: map-get($semantic-typography-heading-h4, font-weight);
    line-height: map-get($semantic-typography-heading-h4, line-height);
    color: $semantic-color-text-primary;
  }
  
  &__column-count {
    display: flex;
    align-items: center;
    gap: $semantic-spacing-component-xs;
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
    color: $semantic-color-text-secondary;
    
    background: $semantic-color-surface-container;
    padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
    border-radius: $semantic-border-radius-full;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
  }
  
  &__column-limit {
    color: $semantic-color-text-tertiary;
  }
  
  // Column Content
  &__column-content {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-sm;
    padding: $semantic-spacing-component-md;
    flex: 1;
    overflow-y: auto;
    
    // Scroll styling
    scrollbar-width: thin;
    scrollbar-color: $semantic-color-border-primary $semantic-color-surface-secondary;
    
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: $semantic-color-surface-secondary;
      border-radius: $semantic-border-radius-sm;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $semantic-color-border-primary;
      border-radius: $semantic-border-radius-sm;
    }
  }
  
  // Empty State
  &__empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: $semantic-spacing-component-lg;
    background: $semantic-color-surface-container;
    border: 2px dashed $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-md;
  }
  
  &__empty-text {
    margin: 0;
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: map-get($semantic-typography-body-medium, font-weight);
    line-height: map-get($semantic-typography-body-medium, line-height);
    color: $semantic-color-text-tertiary;
    font-style: italic;
  }
  
  // Kanban Item
  &__item {
    display: flex;
    flex-direction: column;
    gap: $semantic-spacing-component-xs;
    padding: $semantic-spacing-component-sm;
    
    // Visual Design
    background: $semantic-color-surface-primary;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-md;
    box-shadow: $semantic-shadow-elevation-1;
    
    // Interactive
    cursor: grab;
    user-select: none;
    transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
    
    // States
    &:hover:not(.ui-kanban-board__item--dragging) {
      box-shadow: $semantic-shadow-elevation-2;
      border-color: $semantic-color-border-primary;
      transform: translateY(-1px);
    }
    
    &:focus-visible {
      outline: 2px solid $semantic-color-focus;
      outline-offset: 2px;
    }
    
    &--dragging {
      cursor: grabbing;
      opacity: $semantic-opacity-subtle;
      transform: rotate(2deg) scale(1.02);
      box-shadow: $semantic-shadow-elevation-4;
      z-index: $semantic-z-index-overlay;
    }
    
    // Priority variants
    &--priority-high {
      border-left: 4px solid $semantic-color-danger;
    }
    
    &--priority-medium {
      border-left: 4px solid $semantic-color-warning;
    }
    
    &--priority-low {
      border-left: 4px solid $semantic-color-success;
    }
  }
  
  // Item Header
  &__item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: $semantic-spacing-component-xs;
  }
  
  &__item-title {
    margin: 0;
    flex: 1;
    font-family: map-get($semantic-typography-body-medium, font-family);
    font-size: map-get($semantic-typography-body-medium, font-size);
    font-weight: $semantic-typography-font-weight-semibold;
    line-height: map-get($semantic-typography-body-medium, line-height);
    color: $semantic-color-text-primary;
  }
  
  &__item-priority {
    font-size: $semantic-typography-font-size-sm;
    line-height: 1;
  }
  
  // Item Description
  &__item-description {
    margin: 0;
    font-family: map-get($semantic-typography-body-small, font-family);
    font-size: map-get($semantic-typography-body-small, font-size);
    font-weight: map-get($semantic-typography-body-small, font-weight);
    line-height: map-get($semantic-typography-body-small, line-height);
    color: $semantic-color-text-secondary;
  }
  
  // Item Tags
  &__item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: $semantic-spacing-component-xs;
  }
  
  &__item-tag {
    display: inline-block;
    padding: 2px $semantic-spacing-component-xs;
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-primary;
    background: $semantic-color-surface-container;
    border: $semantic-border-width-1 solid $semantic-color-border-subtle;
    border-radius: $semantic-border-radius-sm;
  }
  
  // Item Meta
  &__item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $semantic-spacing-component-xs;
    margin-top: $semantic-spacing-component-xs;
  }
  
  &__item-assignee,
  &__item-due-date {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: map-get($semantic-typography-caption, font-family);
    font-size: map-get($semantic-typography-caption, font-size);
    font-weight: map-get($semantic-typography-caption, font-weight);
    line-height: map-get($semantic-typography-caption, line-height);
    color: $semantic-color-text-secondary;
  }
  
  // Responsive Design
  .ui-kanban-board--sm {
    .ui-kanban-board__column {
      min-width: 220px;
      max-width: 280px;
    }
    
    .ui-kanban-board__columns {
      gap: $semantic-spacing-grid-gap-sm;
    }
    
    .ui-kanban-board__column-header {
      padding: $semantic-spacing-component-sm;
    }
    
    .ui-kanban-board__column-content {
      padding: $semantic-spacing-component-sm;
      gap: $semantic-spacing-component-xs;
    }
    
    .ui-kanban-board__item {
      padding: $semantic-spacing-component-xs;
    }
  }
  
  .ui-kanban-board--lg {
    .ui-kanban-board__column {
      min-width: 320px;
      max-width: 420px;
    }
    
    .ui-kanban-board__columns {
      gap: $semantic-spacing-grid-gap-lg;
    }
    
    .ui-kanban-board__column-header {
      padding: $semantic-spacing-component-lg;
    }
    
    .ui-kanban-board__column-content {
      padding: $semantic-spacing-component-lg;
      gap: $semantic-spacing-component-md;
    }
    
    .ui-kanban-board__item {
      padding: $semantic-spacing-component-md;
    }
  }
}

// High contrast mode support
@media (prefers-contrast: high) {
  .ui-kanban-board {
    &__column {
      border-width: 2px;
    }
    
    &__item {
      border-width: 2px;
      
      &--priority-high,
      &--priority-medium,
      &--priority-low {
        border-left-width: 6px;
      }
    }
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .ui-kanban-board {
    &__column,
    &__item {
      transition: none;
    }
    
    &__item {
      &:hover:not(.ui-kanban-board__item--dragging) {
        transform: none;
      }
      
      &--dragging {
        transform: none;
      }
    }
  }
}