s5l.ru-crm/app/pages/Admin/Import/index.styl

.import-page
  max-width: 1200px
  margin: 0 auto

.import-steps
  display: flex
  justify-content: space-between
  margin-bottom: var(--spacing-2xl)
  position: relative
  
  &::before
    content: ''
    position: absolute
    top: 20px
    left: 0
    right: 0
    height: 2px
    background: var(--border-color)
    z-index: 1

.import-step
  display: flex
  flex-direction: column
  align-items: center
  position: relative
  z-index: 2
  flex: 1

.import-step__number
  width: 40px
  height: 40px
  border-radius: 50%
  background: var(--color-light)
  border: 2px solid var(--border-color)
  display: flex
  align-items: center
  justify-content: center
  font-weight: var(--font-weight-bold)
  margin-bottom: var(--spacing-sm)
  transition: var(--transition-normal)
  
  .import-step--active &
    background: var(--color-primary)
    border-color: var(--color-primary)
    color: var(--color-white)

.import-step-content
  background: var(--color-white)
  padding: var(--spacing-2xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  
  .theme-dark &
    background: var(--color-dark)

.field-mapping
  margin: var(--spacing-xl) 0

.field-mapping__row
  display: flex
  align-items: center
  padding: var(--spacing-md)
  border-bottom: 1px solid var(--border-color)
  
  &:last-child
    border-bottom: none

.field-mapping__csv-field
  flex: 1
  font-weight: var(--font-weight-medium)

.field-mapping__select
  flex: 2
  padding: var(--spacing-sm)
  border: 1px solid var(--border-color)
  border-radius: var(--border-radius)
  background: var(--color-white)
  
  .theme-dark &
    background: var(--color-dark-50)
    color: var(--color-light)

.preview-info
  background: var(--color-light-10)
  padding: var(--spacing-lg)
  border-radius: var(--border-radius)
  margin-bottom: var(--spacing-xl)
  
  .theme-dark &
    background: var(--color-dark-50)

.import-progress
  margin: var(--spacing-2xl) 0

.import-progress__bar
  height: 20px
  background: var(--color-light-10)
  border-radius: 10px
  overflow: hidden
  margin-bottom: var(--spacing-md)
  
  .theme-dark &
    background: var(--color-dark-50)

.import-progress__fill
  height: 100%
  background: var(--color-primary)
  transition: width 0.3s ease
  border-radius: 10px

.import-progress__text
  text-align: center
  font-weight: var(--font-weight-medium)
  color: var(--color-secondary)

.import-stats
  display: flex
  gap: var(--spacing-xl)
  justify-content: center
  margin: var(--spacing-xl) 0

.import-stat
  padding: var(--spacing-md)
  background: var(--color-light-10)
  border-radius: var(--border-radius)
  text-align: center
  
  .theme-dark &
    background: var(--color-dark-50)

.import-errors
  margin-top: var(--spacing-xl)
  max-height: 300px
  overflow-y: auto

.import-error
  padding: var(--spacing-md)
  background: var(--color-danger-10)
  border-left: 4px solid var(--color-danger)
  margin-bottom: var(--spacing-sm)
  border-radius: var(--border-radius-sm)

.import-actions
  display: flex
  gap: var(--spacing-md)
  justify-content: flex-end
  margin-top: var(--spacing-2xl)

.file-info
  background: var(--color-light-10)
  padding: var(--spacing-lg)
  border-radius: var(--border-radius)
  margin-top: var(--spacing-xl)
  
  .theme-dark &
    background: var(--color-dark-50)

// Адаптивность
@media (max-width: 768px)
  .import-steps
    flex-direction: column
    gap: var(--spacing-lg)
    
    &::before
      display: none
  
  .import-step
    flex-direction: row
    gap: var(--spacing-md)
  
  .import-step__number
    margin-bottom: 0
  
  .field-mapping__row
    flex-direction: column
    align-items: flex-start
    gap: var(--spacing-sm)
  
  .import-stats
    flex-direction: column
    gap: var(--spacing-md)
  
  .import-actions
    flex-direction: column