// 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 $gray-200
  padding-bottom: 1.5rem

  .dark &
    border-bottom-color: $gray-700

.admin-products__title
  font-size: 1.875rem
  font-weight: bold
  color: $gray-900

  .dark &
    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

.admin-products__btn--primary
  background-color: $primary-600
  color: $white

  &:hover
    background-color: $primary-700

.admin-products__btn--secondary
  background-color: $gray-200
  color: $gray-700

  &:hover
    background-color: $gray-300

  .dark &
    background-color: $gray-700
    color: $gray-300

    &:hover
      background-color: $gray-600

// Content area
.admin-products__content
  background-color: $white
  border-radius: 0.5rem
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)
  padding: 1.5rem

  .dark &
    background-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: $gray-700

  .dark &
    color: $gray-300

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

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: $gray-600

    &:focus
      border-color: $primary-500
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

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

  &:focus
    outline: none
    border-color: $primary-500
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  .dark &
    background-color: $gray-700
    color: $white
    border-color: $gray-600

    &:focus
      border-color: $primary-500
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

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

.admin-products__table
  width: 100%
  border-collapse: collapse
  background-color: $white

  .dark &
    background-color: $gray-800

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

  .dark &
    background-color: $gray-700
    color: $gray-300
    border-bottom-color: $gray-600

.admin-products__tr
  &:hover
    background-color: $gray-50

    .dark &
      background-color: $gray-700

.admin-products__td
  padding: 0.75rem 1rem
  border-bottom: 1px solid $gray-200
  font-size: 0.875rem

  .dark &
    border-bottom-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: $gray-200
  border-radius: 0.25rem
  display: flex
  align-items: center
  justify-content: center
  font-size: 0.75rem
  color: $gray-500

  .dark &
    background-color: $gray-600
    color: $gray-400

.admin-products__name
  font-weight: 500
  color: $gray-900

  .dark &
    color: $white

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

  .dark &
    color: #4ade80

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

  .dark &
    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: #f0fdf4
  color: #16a34a

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

.admin-products__status--inactive
  background-color: #fef2f2
  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: #dbeafe
  color: #1e40af

  &:hover
    background-color: #bfdbfe

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

    &:hover
      background-color: #1e40af

.admin-products__action-btn--toggle
  background-color: $gray-100
  color: $gray-700

  &:hover
    background-color: $gray-200

  .dark &
    background-color: $gray-600
    color: $gray-300

    &:hover
      background-color: $gray-500

.admin-products__action-btn--delete
  background-color: #fee2e2
  color: #dc2626

  &:hover
    background-color: #fecaca

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

    &:hover
      background-color: #991b1b

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

.admin-products__modal-content
  background-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: $gray-800

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

  .dark &
    color: $white

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

.admin-products__file-input
  display: block
  width: 100%
  font-size: 0.875rem
  color: $gray-500

  &::file-selector-button
    margin-right: 1rem
    padding: 0.5rem 1rem
    border-radius: 9999px
    border: none
    background-color: $primary-50
    color: $primary-700
    font-size: 0.875rem
    font-weight: 500
    cursor: pointer
    transition: background-color 0.2s ease-in-out

    &:hover
      background-color: $primary-100

    .dark &
      background-color: $primary-900
      color: $primary-300

      &:hover
        background-color: $primary-800

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

  .dark &
    background-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

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

// 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

  .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