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

// Admin panel styles
.admin
  display: flex
  min-height: 100vh
  background-color: $gray-50

  .dark &
    background-color: $gray-900

.admin__sidebar
  width: 16rem
  background-color: $white
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
  height: 100vh
  position: fixed
  left: 0
  top: 0
  z-index: 40

  .dark &
    background-color: $gray-800

.admin__sidebar-header
  padding: 1.5rem
  border-bottom: 1px solid $gray-200

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

.admin__sidebar-title
  font-size: 1.25rem
  font-weight: bold
  color: $gray-800
  margin-bottom: 0.5rem

  .dark &
    color: $white

.admin__domain-info
  font-size: 0.875rem
  color: $gray-600
  background-color: $gray-100
  padding: 0.25rem 0.75rem
  border-radius: 9999px
  display: inline-block

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

.admin__nav
  padding: 1rem
  display: flex
  flex-direction: column
  gap: 0.5rem

.admin__nav-item
  display: flex
  align-items: center
  gap: 0.75rem
  padding: 0.75rem 1rem
  border-radius: 0.5rem
  transition: all 0.2s ease-in-out
  text-decoration: none
  color: inherit
  border: none
  background: none
  cursor: pointer
  width: 100%
  text-align: left

  &:hover
    background-color: $gray-100
    color: $gray-900

  .dark &
    &:hover
      background-color: $gray-700
      color: $white

.admin__nav-item--active
  background-color: $primary-100
  color: $primary-700

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

  &:hover
    background-color: $primary-200
    color: $primary-800

    .dark &
      background-color: $primary-800
      color: $primary-200

.admin__nav-item--inactive
  color: $gray-600

  .dark &
    color: $gray-400

.admin__nav-item-content
  display: flex
  align-items: center
  gap: 0.75rem

.admin__nav-icon
  width: 1.25rem
  height: 1.25rem

.admin__nav-text
  font-weight: 500

.admin__content
  flex: 1
  margin-left: 16rem
  padding: 1.5rem

// Admin content area styles
.admin-content
  &__header
    margin-bottom: 2rem

  &__title
    font-size: 1.875rem
    font-weight: bold
    color: $gray-900
    margin-bottom: 0.5rem

    .dark &
      color: $white

  &__subtitle
    color: $gray-600
    font-size: 1.125rem

    .dark &
      color: $gray-400

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

  &__section
    margin-bottom: 2rem

    &:last-child
      margin-bottom: 0

  &__section-title
    font-size: 1.25rem
    font-weight: 600
    color: $gray-900
    margin-bottom: 1rem

    .dark &
      color: $white

  &__section-description
    color: $gray-600
    margin-bottom: 1.5rem

    .dark &
      color: $gray-400

// Admin form styles
.admin-form
  &__group
    margin-bottom: 1.5rem

  &__label
    display: block
    font-size: 0.875rem
    font-weight: 500
    color: $gray-700
    margin-bottom: 0.5rem

    .dark &
      color: $gray-300

  &__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
      // Исправлено: используем функцию rgba с компонентами цвета
      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)

  &__textarea
    @extend .admin-form__input
    resize: vertical
    min-height: 5rem

  &__select
    @extend .admin-form__input

  &__checkbox
    border-radius: 0.25rem
    border: 1px solid $gray-300
    background-color: $white
    color: $primary-600

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

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

// Admin button styles
.admin-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
  gap: 0.5rem

  &:focus
    outline: none
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2)

  &--primary
    background-color: $primary-600
    color: $white

    &:hover
      background-color: $primary-700

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

  &--danger
    background-color: #dc2626
    color: $white

    &:hover
      background-color: #b91c1c

  &--success
    background-color: #16a34a
    color: $white

    &:hover
      background-color: #15803d

// Admin table styles
.admin-table
  width: 100%
  border-collapse: collapse
  background-color: $white

  .dark &
    background-color: $gray-800

  &__header
    background-color: $gray-50

    .dark &
      background-color: $gray-700

  &__th
    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 &
      color: $gray-300
      border-bottom-color: $gray-600

  &__tr
    &:hover
      background-color: $gray-50

      .dark &
        background-color: $gray-700

  &__td
    padding: 0.75rem 1rem
    border-bottom: 1px solid $gray-200
    font-size: 0.875rem

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

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

  &__content
    background-color: $white
    border-radius: 0.5rem
    padding: 1.5rem
    max-width: 32rem
    width: 100%
    margin: 0 1rem
    max-height: 90vh
    overflow-y: auto

    .dark &
      background-color: $gray-800

  &__title
    font-size: 1.125rem
    font-weight: 500
    color: $gray-900
    margin-bottom: 1rem

    .dark &
      color: $white

  &__actions
    display: flex
    gap: 0.75rem
    justify-content: flex-end
    margin-top: 1.5rem

// Responsive adjustments for admin panel
@media (max-width: 1024px)
  .admin__sidebar
    width: 14rem

  .admin__content
    margin-left: 14rem

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

  .admin__sidebar
    position: static
    width: 100%
    height: auto

  .admin__content
    margin-left: 0
    padding: 1rem

  .admin-modal__content
    margin: 0 0.5rem