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

// Admin Products styles
.admin-products
  display: flex
  flex-direction: column
  gap: 1.5rem

.admin-products__header
  display: flex
  justify-content: space-between
  align-items: center
  border-bottom: 1px solid var(--color-gray-200)
  padding-bottom: 1.5rem

  .dark &
    border-bottom-color: var(--color-gray-700)

.admin-products__title
  font-size: 1.875rem
  font-weight: bold
  color: var(--color-gray-900)

  .dark &
    color: var(--color-white)

.admin-products__actions
  display: flex
  gap: 0.75rem

// Button styles
.admin-products__btn
  padding: 0.5rem 1rem
  border-radius: 0.5rem
  font-weight: 500
  font-size: 0.875rem
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer
  text-decoration: none
  display: inline-flex
  align-items: center
  justify-content: center

  &:focus
    outline: none
    box-shadow: 0 0 0 2px var(--color-primary-500-a20)

.admin-products__btn--primary
  background-color: var(--color-primary-600)
  color: var(--color-white)

  &:hover
    background-color: var(--color-primary-700)

.admin-products__btn--secondary
  background-color: var(--color-gray-200)
  color: var(--color-gray-700)

  &:hover
    background-color: var(--color-gray-300)

  .dark &
    background-color: var(--color-gray-700)
    color: var(--color-gray-300)

    &:hover
      background-color: var(--color-gray-600)

.admin-products__btn--danger
  background-color: #dc2626
  color: var(--color-white)

  &:hover
    background-color: #b91c1c

.admin-products__btn--edit
  background-color: #dbeafe
  color: #1e40af

  &:hover
    background-color: #bfdbfe

  .dark &
    background-color: #1e3a8a
    color: #93c5fd

    &:hover
      background-color: #1e40af

// Content area
.admin-products__content
  background-color: var(--color-white)
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 var(--color-shadow-light)
  padding: 1.5rem

  .dark &
    background-color: var(--color-gray-800)

// Filters
.admin-products__filters
  display: grid
  grid-template-columns: 1fr
  gap: 1rem
  margin-bottom: 1.5rem

  @media (min-width: 768px)
    grid-template-columns: repeat(3, 1fr)

.admin-products__filter-group
  display: flex
  flex-direction: column
  gap: 0.5rem

.admin-products__label
  display: block
  font-size: 0.875rem
  font-weight: 500
  color: var(--color-gray-700)

  .dark &
    color: var(--color-gray-300)

.admin-products__input
  width: 100%
  padding: 0.5rem 0.75rem
  border: 1px solid var(--color-gray-300)
  border-radius: 0.5rem
  background-color: var(--color-white)
  color: var(--color-gray-900)
  font-size: 0.875rem
  transition: all 0.2s ease-in-out

  &:focus
    outline: none
    border-color: var(--color-primary-500)
    box-shadow: 0 0 0 2px var(--color-primary-500-a20)

  .dark &
    background-color: var(--color-gray-700)
    color: var(--color-white)
    border-color: var(--color-gray-600)

    &:focus
      border-color: var(--color-primary-500)

.admin-products__select
  @extend .admin-products__input

.admin-products__textarea
  @extend .admin-products__input
  resize: vertical
  min-height: 5rem

// Table styles
.admin-products__table-container
  overflow-x: auto

.admin-products__table
  width: 100%
  border-collapse: collapse
  background-color: var(--color-white)

  .dark &
    background-color: var(--color-gray-800)

.admin-products__th
  background-color: var(--color-gray-50)
  padding: 0.75rem 1rem
  text-align: left
  font-size: 0.75rem
  font-weight: 500
  color: var(--color-gray-500)
  text-transform: uppercase
  letter-spacing: 0.05em
  border-bottom: 1px solid var(--color-gray-200)

  .dark &
    background-color: var(--color-gray-700)
    color: var(--color-gray-300)
    border-bottom-color: var(--color-gray-600)

.admin-products__tr
  &:hover
    background-color: var(--color-background-hover)

    .dark &
      background-color: var(--color-dark-background-hover)

.admin-products__td
  padding: 0.75rem 1rem
  border-bottom: 1px solid var(--color-gray-200)
  font-size: 0.875rem

  .dark &
    border-bottom-color: var(--color-gray-600)

.admin-products__image
  width: 2.5rem
  height: 2.5rem
  object-fit: cover
  border-radius: 0.25rem

.admin-products__no-image
  width: 2.5rem
  height: 2.5rem
  background-color: var(--color-gray-200)
  border-radius: 0.25rem
  display: flex
  align-items: center
  justify-content: center
  font-size: 0.75rem
  color: var(--color-gray-500)

  .dark &
    background-color: var(--color-gray-600)
    color: var(--color-gray-400)

.admin-products__name
  font-weight: 500
  color: var(--color-gray-900)

  .dark &
    color: var(--color-white)

.admin-products__price
  font-weight: 500
  color: #16a34a

  .dark &
    color: #4ade80

.admin-products__old-price
  font-size: 0.75rem
  color: var(--color-gray-500)
  text-decoration: line-through

  .dark &
    color: var(--color-gray-400)

.admin-products__status
  padding: 0.25rem 0.5rem
  border-radius: 0.25rem
  font-size: 0.75rem
  font-weight: 500

.admin-products__status--active
  background-color: var(--color-primary-500-a10)
  color: #16a34a

  .dark &
    background-color: #14532d
    color: #4ade80

.admin-products__status--inactive
  background-color: var(--color-primary-500-a10)
  color: #dc2626

  .dark &
    background-color: #7f1d1d
    color: #fca5a5

.admin-products__action-buttons
  display: flex
  gap: 0.5rem

.admin-products__action-btn
  padding: 0.25rem 0.5rem
  border-radius: 0.25rem
  font-size: 0.75rem
  font-weight: 500
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer

.admin-products__action-btn--edit
  background-color: var(--color-accent-500-a20)
  color: #1e40af

  &:hover
    background-color: var(--color-accent-500-a30)

  .dark &
    background-color: #1e3a8a
    color: #93c5fd

    &:hover
      background-color: #1e40af

.admin-products__action-btn--toggle
  background-color: var(--color-gray-100)
  color: var(--color-gray-700)

  &:hover
    background-color: var(--color-gray-200)

  .dark &
    background-color: var(--color-gray-600)
    color: var(--color-gray-300)

    &:hover
      background-color: var(--color-gray-500)

.admin-products__action-btn--delete
  background-color: var(--color-primary-500-a10)
  color: #dc2626

  &:hover
    background-color: var(--color-primary-500-a20)

  .dark &
    background-color: #7f1d1d
    color: #fca5a5

    &:hover
      background-color: #991b1b

// Modal styles
.admin-products__modal
  position: fixed
  inset: 0
  background-color: var(--color-background-overlay)
  display: flex
  align-items: center
  justify-content: center
  z-index: 50

.admin-products__modal-content
  background-color: var(--color-white)
  border-radius: 0.5rem
  padding: 1.5rem
  max-width: 48rem
  width: 100%
  margin: 0 1rem
  max-height: 90vh
  overflow-y: auto

  .dark &
    background-color: var(--color-gray-800)

  &.admin-products__modal-content--large
    max-width: 64rem

.admin-products__modal-title
  font-size: 1.125rem
  font-weight: 500
  color: var(--color-gray-900)
  margin-bottom: 1rem

  .dark &
    color: var(--color-white)

.admin-products__modal-form
  display: flex
  flex-direction: column
  gap: 1rem
  margin-bottom: 1.5rem

.admin-products__form-group
  display: flex
  flex-direction: column
  gap: 0.5rem

// Image upload styles
.admin-products__image-upload
  display: flex
  flex-direction: column
  gap: 0.75rem

.admin-products__image-preview
  position: relative
  width: 100%
  max-width: 200px
  border: 1px solid var(--color-gray-300)
  border-radius: 0.5rem
  overflow: hidden

  &.admin-products__image-preview--small
    max-width: 100px

  .dark &
    border-color: var(--color-gray-600)

.admin-products__preview-image
  width: 100%
  height: auto
  display: block

.admin-products__image-placeholder
  padding: 2rem
  background-color: var(--color-gray-100)
  border: 1px dashed var(--color-gray-300)
  border-radius: 0.5rem
  text-align: center
  color: var(--color-gray-500)
  font-size: 0.875rem

  .dark &
    background-color: var(--color-gray-700)
    border-color: var(--color-gray-600)
    color: var(--color-gray-400)

.admin-products__file-input
  display: none

// Checkbox and domain styles
.admin-products__checkbox-label
  display: flex
  align-items: center
  gap: 0.5rem
  color: var(--color-gray-700)
  font-size: 0.875rem

  .dark &
    color: var(--color-gray-300)

.admin-products__checkbox
  border-radius: 0.25rem
  border: 1px solid var(--color-gray-300)
  background-color: var(--color-white)
  color: var(--color-primary-600)

  &:focus
    border-color: var(--color-primary-500)
    box-shadow: 0 0 0 2px var(--color-primary-500-a20)

  .dark &
    background-color: var(--color-gray-700)
    border-color: var(--color-gray-600)

.admin-products__domains-list
  display: grid
  grid-template-columns: repeat(2, 1fr)
  gap: 0.5rem

.admin-products__domain-label
  display: flex
  align-items: center
  gap: 0.5rem
  font-size: 0.875rem
  color: var(--color-gray-700)

  .dark &
    color: var(--color-gray-300)

.admin-products__domain-checkbox
  border-radius: 0.25rem
  border: 1px solid var(--color-gray-300)
  background-color: var(--color-white)
  color: var(--color-primary-600)

  &:focus
    border-color: var(--color-primary-500)
    box-shadow: 0 0 0 2px var(--color-primary-500-a20)

  .dark &
    background-color: var(--color-gray-700)
    border-color: var(--color-gray-600)

.admin-products__modal-actions
  display: flex
  gap: 0.75rem
  justify-content: flex-end

// Import form styles
.admin-products__import-form
  display: flex
  flex-direction: column
  gap: 1rem
  margin-bottom: 1.5rem

.admin-products__help-text
  font-size: 0.75rem
  color: var(--color-gray-500)
  margin-top: 0.25rem

  .dark &
    color: var(--color-gray-400)

.admin-products__file-info
  padding: 1rem
  background-color: var(--color-gray-50)
  border-radius: 0.5rem

  .dark &
    background-color: var(--color-gray-700)

.admin-products__import-results
  padding: 1rem
  border-radius: 0.5rem

.admin-products__success
  color: #16a34a
  font-weight: 500
  margin-bottom: 0.5rem

  .dark &
    color: #4ade80

.admin-products__error
  color: #dc2626
  font-weight: 500
  margin-bottom: 0.5rem

  .dark &
    color: #fca5a5

// Categories management styles
.admin-products__categories-tabs
  display: flex
  gap: 0
  border-bottom: 1px solid var(--color-gray-200)
  margin-bottom: 1.5rem

  .dark &
    border-bottom-color: var(--color-gray-700)

.admin-products__categories-tab
  padding: 0.75rem 1.5rem
  background: none
  border: none
  border-bottom: 2px solid transparent
  color: var(--color-gray-600)
  font-weight: 500
  cursor: pointer
  transition: all 0.2s ease-in-out

  &:hover
    color: var(--color-gray-900)

  .dark &
    color: var(--color-gray-400)

    &:hover
      color: var(--color-white)

  &.admin-products__categories-tab--active
    color: var(--color-primary-600)
    border-bottom-color: var(--color-primary-600)

    .dark &
      color: var(--color-primary-400)
      border-bottom-color: var(--color-primary-400)

.admin-products__categories-header
  display: flex
  justify-content: space-between
  align-items: center
  margin-bottom: 1.5rem

.admin-products__categories-grid
  display: grid
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
  gap: 1rem

.admin-products__category-item
  background-color: var(--color-gray-50)
  border: 1px solid var(--color-gray-200)
  border-radius: 0.5rem
  overflow: hidden

  .dark &
    background-color: var(--color-gray-700)
    border-color: var(--color-gray-600)

.admin-products__category-preview
  padding: 1rem

.admin-products__category-image
  width: 100%
  height: 120px
  object-fit: cover
  border-radius: 0.375rem
  margin-bottom: 0.75rem

.admin-products__category-no-image
  width: 100%
  height: 120px
  background-color: var(--color-gray-200)
  border-radius: 0.375rem
  display: flex
  align-items: center
  justify-content: center
  color: var(--color-gray-500)
  font-size: 0.875rem
  margin-bottom: 0.75rem

  .dark &
    background-color: var(--color-gray-600)
    color: var(--color-gray-400)

.admin-products__category-info
  text-align: center

.admin-products__category-name
  font-weight: 600
  color: var(--color-gray-900)
  margin-bottom: 0.5rem

  .dark &
    color: var(--color-white)

.admin-products__category-description
  color: var(--color-gray-600)
  font-size: 0.875rem
  margin-bottom: 0.75rem
  line-height: 1.4

  .dark &
    color: var(--color-gray-400)

.admin-products__category-meta
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 0.75rem

.admin-products__category-products
  color: var(--color-gray-500)

  .dark &
    color: var(--color-gray-400)

.admin-products__category-actions
  display: flex
  gap: 0.5rem
  padding: 0.75rem
  border-top: 1px solid var(--color-gray-200)
  background-color: var(--color-white)

  .dark &
    border-top-color: var(--color-gray-600)
    background-color: var(--color-gray-800)

// Responsive adjustments
@media (max-width: 768px)
  .admin-products__header
    flex-direction: column
    align-items: flex-start
    gap: 1rem

  .admin-products__actions
    width: 100%
    justify-content: flex-start
    flex-wrap: wrap

  .admin-products__filters
    grid-template-columns: 1fr

  .admin-products__action-buttons
    flex-direction: column

  .admin-products__action-btn
    text-align: center

  .admin-products__modal-content
    margin: 0 0.5rem
    padding: 1rem

  .admin-products__categories-grid
    grid-template-columns: 1fr

  .admin-products__domains-list
    grid-template-columns: 1fr

  .admin-products__categories-tabs
    flex-direction: column

  .admin-products__categories-tab
    text-align: center

@media (max-width: 480px)
  .admin-products__category-meta
    flex-direction: column
    gap: 0.5rem
    align-items: flex-start