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
    padding: 24px
    background: white
    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

  &__button
    padding: 10px 16px
    border: none
    border-radius: 6px
    font-size: 14px
    font-weight: 500
    cursor: pointer
    transition: all 0.2s ease
    text-decoration: none
    display: inline-flex
    align-items: center
    gap: 8px

    &--primary
      background: #3b82f6
      color: white

      &:hover
        background: #2563eb

    &--secondary
      background: #6b7280
      color: white

      &:hover
        background: #4b5563

    &--success
      background: #10b981
      color: white

      &:hover
        background: #059669

    &--warning
      background: #f59e0b
      color: white

      &:hover
        background: #d97706

    &--danger
      background: #ef4444
      color: white

      &:hover
        background: #dc2626

    &:disabled
      opacity: 0.6
      cursor: not-allowed

  &__filters
    display: flex
    gap: 16px
    margin-bottom: 24px
    padding: 20px
    background: white
    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
      transition: border-color 0.2s ease

      &:focus
        outline: none
        border-color: #3b82f6
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)

  &__filter-group
    display: flex
    gap: 12px

  &__select
    padding: 10px 12px
    border: 1px solid #d1d5db
    border-radius: 6px
    font-size: 14px
    background: white
    cursor: pointer
    transition: border-color 0.2s ease

    &: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
    padding: 16px
    text-align: left
    font-weight: 600
    color: #374151
    border-bottom: 1px solid #e5e7eb
    background: #f9fafb

    &--checkbox
      width: 40px

  &__tr
    border-bottom: 1px solid #e5e7eb
    transition: background-color 0.2s ease

    &:hover
      background: #f9fafb

    &--inactive
      opacity: 0.6

  &__td
    padding: 16px
    border-bottom: 1px solid #e5e7eb

    &--checkbox
      width: 40px

    &--sku
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace
      font-size: 12px
      color: #6b7280

    &--name
      font-weight: 500
      color: #1f2937

    &--price
      text-align: right

    &--actions
      display: flex
      gap: 8px

  &__checkbox
    width: 16px
    height: 16px
    cursor: pointer

  &__old-price
    text-decoration: line-through
    color: #6b7280
    font-size: 12px
    margin-right: 8px

  &__current-price
    font-weight: 600
    color: #1f2937

  &__status
    padding: 4px 8px
    border-radius: 12px
    font-size: 12px
    font-weight: 500

    &--active
      background: #d1fae5
      color: #065f46

    &--inactive
      background: #fee2e2
      color: #991b1b

  &__action-button
    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

    &--activate
      background: #d1fae5
      color: #065f46

      &:hover
        background: #a7f3d0

    &--deactivate
      background: #fef3c7
      color: #92400e

      &:hover
        background: #fde68a

  &__empty
    padding: 60px 20px
    text-align: center

    &-text
      color: #6b7280
      font-size: 16px
      margin: 0

  &__modal
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0, 0, 0, 0.5)
    display: flex
    align-items: center
    justify-content: center
    z-index: 1000

  &__modal-content
    background: white
    border-radius: 8px
    width: 90%
    max-width: 600px
    max-height: 90vh
    overflow-y: auto

  &__modal-header
    display: flex
    justify-content: space-between
    align-items: center
    padding: 24px
    border-bottom: 1px solid #e5e7eb

  &__modal-title
    font-size: 20px
    font-weight: 600
    color: #1f2937
    margin: 0

  &__modal-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

  &__modal-body
    padding: 24px

  &__modal-footer
    display: flex
    justify-content: flex-end
    gap: 12px
    padding: 24px
    border-top: 1px solid #e5e7eb

  &__import-progress
    text-align: center

  &__progress-bar
    width: 100%
    height: 8px
    background: #e5e7eb
    border-radius: 4px
    overflow: hidden
    margin-bottom: 12px

  &__progress-fill
    height: 100%
    background: #3b82f6
    transition: width 0.3s ease

  &__progress-text
    color: #6b7280
    font-size: 14px
    margin: 0

  &__import-form
    text-align: center

  &__file-input
    width: 100%
    padding: 12px
    border: 2px dashed #d1d5db
    border-radius: 6px
    margin-bottom: 12px

    &:focus
      outline: none
      border-color: #3b82f6

  &__help-text
    color: #6b7280
    font-size: 14px
    margin: 0

  &__import-results
    margin-top: 20px

  &__result
    padding: 16px
    border-radius: 6px

    &--success
      background: #d1fae5
      border: 1px solid #a7f3d0

    &--error
      background: #fee2e2
      border: 1px solid #fecaca

    h3
      margin: 0 0 8px 0
      font-size: 16px
      font-weight: 600

    p
      margin: 0 0 8px 0
      font-size: 14px

    ul
      margin: 8px 0 0 0
      padding-left: 20px

      li
        font-size: 12px
        color: #6b7280

  &__mass-actions
    display: grid
    grid-template-columns: 1fr 1fr
    gap: 12px

// Адаптивные стили
@media (max-width: 768px)
  .admin-products
    padding: 12px

    &__header
      flex-direction: column
      gap: 16px
      align-items: stretch

    &__actions
      flex-wrap: wrap
      justify-content: center

    &__filters
      flex-direction: column

    &__filter-group
      flex-direction: column

    &__td--actions
      flex-direction: column

    &__mass-actions
      grid-template-columns: 1fr

    &__modal-content
      width: 95%
      margin: 20px

    &__modal-footer
      flex-direction: column
// ... предыдущие стилы остаются без изменений ...

// Стили для формы редактирования
.admin-products
  &__modal-content--large
    max-width: 800px

  &__form
    display: flex
    flex-direction: column
    gap: 16px

  &__form-row
    display: grid
    grid-template-columns: 1fr 1fr
    gap: 16px

    @media (max-width: 768px)
      grid-template-columns: 1fr

  &__form-group
    display: flex
    flex-direction: column
    gap: 8px

  &__label
    font-weight: 500
    color: #374151
    font-size: 14px

    &--checkbox
      display: flex
      align-items: center
      gap: 8px
      cursor: pointer

  &__input
    padding: 10px 12px
    border: 1px solid #d1d5db
    border-radius: 6px
    font-size: 14px
    transition: border-color 0.2s ease

    &:focus
      outline: none
      border-color: #3b82f6
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)

  &__textarea
    padding: 10px 12px
    border: 1px solid #d1d5db
    border-radius: 6px
    font-size: 14px
    resize: vertical
    min-height: 80px
    transition: border-color 0.2s ease

    &:focus
      outline: none
      border-color: #3b82f6
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)

  // Стили для загрузки изображений
  &__image-upload
    display: flex
    flex-direction: column
    gap: 12px

  &__image-preview
    display: flex
    align-items: center
    gap: 12px
    padding: 12px
    border: 1px solid #e5e7eb
    border-radius: 6px
    background: #f9fafb

  &__preview-img
    width: 60px
    height: 60px
    object-fit: cover
    border-radius: 4px

  &__image-info
    color: #6b7280
    font-size: 14px

  &__upload-controls
    display: flex
    gap: 8px

    @media (max-width: 768px)
      flex-direction: column

  &__additional-images
    display: grid
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr))
    gap: 8px
    margin-bottom: 12px

  &__additional-image
    position: relative
    width: 80px
    height: 80px

  &__image-remove
    position: absolute
    top: -8px
    right: -8px
    width: 24px
    height: 24px
    background: #ef4444
    color: white
    border: none
    border-radius: 50%
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    font-size: 14px
    line-height: 1

    &:hover
      background: #dc2626
// ... предыдущие стили остаются без изменений ...

// Стили для управления атрибутами
.admin-products
  &__attributes
    display: flex
    flex-direction: column
    gap: 8px
    margin-bottom: 12px

  &__attribute
    display: flex
    align-items: center
    gap: 8px
    padding: 8px
    border: 1px solid #e5e7eb
    border-radius: 4px
    background: #f9fafb

  &__attribute-key
    flex: 1
    font-weight: 500
    color: #374151
    font-size: 14px

  &__input--small
    flex: 2
    padding: 6px 8px
    font-size: 13px

  &__attribute-remove
    width: 24px
    height: 24px
    background: #ef4444
    color: white
    border: none
    border-radius: 4px
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    font-size: 14px
    line-height: 1

    &:hover
      background: #dc2626

  &__attribute-add
    display: flex
    gap: 8px
    align-items: center

    @media (max-width: 768px)
      flex-direction: column

// Стили для управления тегами
.admin-products
  &__tags
    display: flex
    flex-wrap: wrap
    gap: 6px
    margin-bottom: 12px

  &__tag
    display: inline-flex
    align-items: center
    gap: 4px
    padding: 4px 8px
    background: #dbeafe
    color: #1e40af
    border-radius: 12px
    font-size: 12px
    font-weight: 500

  &__tag-remove
    width: 16px
    height: 16px
    background: #93c5fd
    color: #1e40af
    border: none
    border-radius: 50%
    cursor: pointer
    display: flex
    align-items: center
    justify-content: center
    font-size: 10px
    line-height: 1

    &:hover
      background: #60a5fa

  &__tag-add
    display: flex
    gap: 8px
    align-items: center

    @media (max-width: 768px)
      flex-direction: column

// Стили для управления категориями
.admin-products
  &__categories-header
    margin-bottom: 16px

  &__categories-list
    display: flex
    flex-direction: column
    gap: 8px

  &__category-item
    display: flex
    justify-content: space-between
    align-items: center
    padding: 12px
    border: 1px solid #e5e7eb
    border-radius: 6px
    background: white

    @media (max-width: 768px)
      flex-direction: column
      align-items: stretch
      gap: 8px

  &__category-info
    flex: 1

  &__category-name
    font-weight: 500
    color: #1f2937
    margin-bottom: 4px

  &__category-meta
    display: flex
    gap: 12px
    font-size: 12px
    color: #6b7280

  &__category-actions
    display: flex
    gap: 8px

    @media (max-width: 768px)
      justify-content: flex-end