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

.admin-products
  padding: 20px
  background: #f8f9fa
  min-height: 100vh

  &__header
    display: flex
    justify-content: space-between
    align-items: center
    margin-bottom: 24px
    background: white
    padding: 20px
    border-radius: 8px
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)

  &__title
    font-size: 24px
    font-weight: 600
    color: #1f2937
    margin: 0

  &__actions
    display: flex
    gap: 12px

  &__btn
    padding: 10px 20px
    border: none
    border-radius: 6px
    font-size: 14px
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease
    
    &--primary
      background: #3b82f6
      color: white
      
      &:hover
        background: #2563eb
    
    &--secondary
      background: #6b7280
      color: white
      
      &:hover
        background: #4b5563

  &__filters
    display: flex
    gap: 16px
    margin-bottom: 20px
    background: white
    padding: 20px
    border-radius: 8px
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)

  &__search
    flex: 1
    
    &-input
      width: 100%
      padding: 10px 12px
      border: 1px solid #d1d5db
      border-radius: 6px
      font-size: 14px
      
      &:focus
        outline: none
        border-color: #3b82f6
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)

  &__category-filter
    min-width: 200px
    
    &-select
      width: 100%
      padding: 10px 12px
      border: 1px solid #d1d5db
      border-radius: 6px
      font-size: 14px
      background: white
      
      &:focus
        outline: none
        border-color: #3b82f6
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)

  &__content
    background: white
    border-radius: 8px
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
    overflow: hidden

  &__table-container
    overflow-x: auto

  &__table
    width: 100%
    border-collapse: collapse

  &__th, &__td
    padding: 12px 16px
    text-align: left
    border-bottom: 1px solid #e5e7eb
    font-size: 14px

  &__th
    background: #f9fafb
    font-weight: 600
    color: #374151
    
    &-checkbox
      width: 40px

  &__tr
    transition: background-color 0.2s ease
    
    &:hover
      background: #f9fafb

  &__td
    &-checkbox
      width: 40px
      text-align: center

  &__status
    padding: 4px 8px
    border-radius: 12px
    font-size: 12px
    font-weight: 500
    
    &--active
      background: #dcfce7
      color: #166534
    
    &--inactive
      background: #fef2f2
      color: #991b1b

  &__actions
    display: flex
    gap: 8px

  &__action-btn
    padding: 6px 12px
    border: none
    border-radius: 4px
    font-size: 12px
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease
    
    &--edit
      background: #dbeafe
      color: #1e40af
      
      &:hover
        background: #bfdbfe
    
    &--delete
      background: #fef2f2
      color: #dc2626
      
      &:hover
        background: #fecaca

  &__empty
    padding: 40px 20px
    text-align: center
    
    &-text
      color: #6b7280
      font-size: 16px

// Модальные окна
.admin-modal
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  z-index: 1000
  display: flex
  align-items: center
  justify-content: center
  
  &__overlay
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0, 0, 0, 0.5)
  
  &__content
    position: relative
    background: white
    border-radius: 8px
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2)
    max-width: 600px
    width: 90%
    max-height: 90vh
    overflow-y: auto
  
  &__header
    display: flex
    justify-content: space-between
    align-items: center
    padding: 20px 24px
    border-bottom: 1px solid #e5e7eb
  
  &__title
    font-size: 18px
    font-weight: 600
    color: #1f2937
    margin: 0
  
  &__close
    background: none
    border: none
    font-size: 24px
    cursor: pointer
    color: #6b7280
    padding: 0
    width: 30px
    height: 30px
    display: flex
    align-items: center
    justify-content: center
    
    &:hover
      color: #374151
  
  &__body
    padding: 24px
  
  &__footer
    display: flex
    justify-content: flex-end
    gap: 12px
    padding: 20px 24px
    border-top: 1px solid #e5e7eb
  
  &__btn
    padding: 10px 20px
    border: none
    border-radius: 6px
    font-size: 14px
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease
    
    &:disabled
      opacity: 0.6
      cursor: not-allowed
    
    &--primary
      background: #3b82f6
      color: white
      
      &:hover:not(:disabled)
        background: #2563eb
    
    &--secondary
      background: #6b7280
      color: white
      
      &:hover:not(:disabled)
        background: #4b5563

// Формы
.admin-form
  &__group
    margin-bottom: 20px
  
  &__label
    display: block
    margin-bottom: 6px
    font-weight: 500
    color: #374151
    font-size: 14px
  
  &__input, &__select, &__textarea
    width: 100%
    padding: 10px 12px
    border: 1px solid #d1d5db
    border-radius: 6px
    font-size: 14px
    transition: all 0.2s ease
    
    &:focus
      outline: none
      border-color: #3b82f6
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
  
  &__textarea
    resize: vertical
    min-height: 80px
  
  &__checkbox
    margin-right: 8px
  
  &__row
    display: grid
    grid-template-columns: 1fr 1fr
    gap: 16px

// Импорт
.admin-import
  &__upload
    margin-bottom: 20px
  
  &__file-input
    display: none
  
  &__upload-area
    border: 2px dashed #d1d5db
    border-radius: 8px
    padding: 40px 20px
    text-align: center
    cursor: pointer
    transition: all 0.2s ease
    
    &:hover, &--dragover
      border-color: #3b82f6
      background: #f0f9ff
  
  &__upload-text
    color: #6b7280
    font-size: 16px
    
    span
      color: #3b82f6
      text-decoration: underline
  
  &__file-info
    display: flex
    justify-content: space-between
    align-items: center
    background: #f3f4f6
    padding: 12px 16px
    border-radius: 6px
    margin-top: 12px
  
  &__file-name
    font-weight: 500
    color: #374151
  
  &__file-size
    color: #6b7280
    font-size: 14px
  
  &__progress
    margin: 20px 0
  
  &__progress-bar
    height: 8px
    background: #e5e7eb
    border-radius: 4px
    overflow: hidden
  
  &__progress-fill
    height: 100%
    background: #10b981
    transition: width 0.3s ease
  
  &__progress-text
    text-align: center
    margin-top: 8px
    font-size: 14px
    color: #6b7280
    font-weight: 500
  
  &__results
    margin-top: 20px
  
  &__result
    padding: 16px
    border-radius: 6px
    
    &--success
      background: #f0fdf4
      border: 1px solid #bbf7d0
    
    &--error
      background: #fef2f2
      border: 1px solid #fecaca
  
  &__result-title
    font-size: 16px
    font-weight: 600
    margin: 0 0 8px 0
    
    .admin-import__result--success &
      color: #166534
    
    .admin-import__result--error &
      color: #991b1b
  
  &__result-text
    margin: 0 0 12px 0
    color: #6b7280
    font-size: 14px
  
  &__errors
    &-title
      font-size: 14px
      font-weight: 600
      margin: 0 0 8px 0
      color: #374151
    
    &-list
      margin: 0
      padding-left: 20px
  
  &__error
    color: #dc2626
    font-size: 14px
    margin-bottom: 4px

// Адаптивность
@media (max-width: 768px)
  .admin-products
    padding: 12px
    
    &__header
      flex-direction: column
      gap: 16px
      align-items: stretch
    
    &__actions
      justify-content: stretch
      
      .admin-products__btn
        flex: 1
    
    &__filters
      flex-direction: column
    
    &__table-container
      font-size: 12px
    
    &__th, &__td
      padding: 8px 12px
  
  .admin-modal__content
    width: 95%
    margin: 20px
  
  .admin-form__row
    grid-template-columns: 1fr