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

// Admin Settings styles
.admin-settings
  display: flex
  flex-direction: column
  gap: 1.5rem

.admin-settings__header
  border-bottom: 1px solid $gray-200
  padding-bottom: 1.5rem

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

.admin-settings__title
  font-size: 1.875rem
  font-weight: bold
  color: $gray-900
  margin-bottom: 0.5rem

  .dark &
    color: $white

.admin-settings__subtitle
  color: $gray-600
  font-size: 1.125rem

  .dark &
    color: $gray-400

.admin-settings__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)

  .dark &
    background-color: $gray-800

.admin-settings__tabs
  border-bottom: 1px solid $gray-200
  display: flex
  gap: 2rem
  padding: 0 1.5rem

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

.admin-settings__tab
  padding: 1rem 0.25rem
  border-bottom: 2px solid transparent
  font-size: 0.875rem
  font-weight: 500
  transition: all 0.2s ease-in-out
  cursor: pointer
  border: none
  background: none
  color: $gray-500

  &:hover
    color: $gray-700
    border-bottom-color: $gray-300

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

.admin-settings__tab--active
  border-bottom-color: $primary-500
  color: $primary-600

  .dark &
    color: $primary-400

  &:hover
    border-bottom-color: $primary-500
    color: $primary-600

    .dark &
      color: $primary-400

.admin-settings__tab--inactive
  border-bottom-color: transparent

.admin-settings__tab-content
  padding: 1.5rem

.admin-settings__section
  margin-bottom: 2rem

  &:last-child
    margin-bottom: 0

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

  .dark &
    color: $white

.admin-settings__section-description
  color: $gray-600
  margin-bottom: 1rem

  .dark &
    color: $gray-400

// Domains list
.admin-settings__domains-list
  display: flex
  flex-direction: column
  gap: 1rem
  margin-bottom: 1.5rem

.admin-settings__domain-item
  display: flex
  align-items: center
  justify-content: space-between
  padding: 1rem
  border: 1px solid $gray-200
  border-radius: 0.5rem

  .dark &
    border-color: $gray-700

.admin-settings__domain-info
  flex: 1

.admin-settings__domain-name
  font-weight: 500
  color: $gray-900
  margin-bottom: 0.25rem

  .dark &
    color: $white

.admin-settings__domain-desc
  color: $gray-600
  font-size: 0.875rem

  .dark &
    color: $gray-400

.admin-settings__domain-actions
  display: flex
  gap: 0.5rem

// Languages list
.admin-settings__languages-list
  display: grid
  grid-template-columns: 1fr
  gap: 1rem

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

.admin-settings__language-item
  display: flex
  align-items: center
  justify-content: space-between
  padding: 1rem
  border: 1px solid $gray-200
  border-radius: 0.5rem

  .dark &
    border-color: $gray-700

.admin-settings__language-info
  display: flex
  align-items: center
  gap: 0.75rem

.admin-settings__language-code
  background-color: $gray-100
  padding: 0.25rem 0.5rem
  border-radius: 0.25rem
  font-size: 0.75rem
  font-weight: 500

  .dark &
    background-color: $gray-700

.admin-settings__language-name
  color: $gray-700

  .dark &
    color: $gray-300

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

.admin-settings__language-btn--enabled
  background-color: #fef2f2
  color: #dc2626

  &:hover
    background-color: #fee2e2

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

    &:hover
      background-color: #991b1b

.admin-settings__language-btn--disabled
  background-color: #f0fdf4
  color: #16a34a

  &:hover
    background-color: #dcfce7

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

    &:hover
      background-color: #166534

// Form styles
.admin-settings__form
  max-width: 28rem
  display: flex
  flex-direction: column
  gap: 1rem

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

.admin-settings__label
  display: block
  font-size: 0.875rem
  font-weight: 500
  color: $gray-700

  .dark &
    color: $gray-300

.admin-settings__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
    // Fixed: Use rgba with actual RGB values instead of variable
    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-settings__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)

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

.admin-settings__checkbox-label
  display: flex
  align-items: center
  gap: 0.5rem
  color: $gray-700
  font-size: 0.875rem

  .dark &
    color: $gray-300

.admin-settings__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

// Button styles
.admin-settings__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 rgba(239, 68, 68, 0.2)

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

  &:hover
    background-color: $primary-700

.admin-settings__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

.admin-settings__btn--danger
  background-color: #dc2626
  color: $white

  &:hover
    background-color: #b91c1c

// Modal styles
.admin-settings__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-settings__modal-content
  background-color: $white
  border-radius: 0.5rem
  padding: 1.5rem
  max-width: 28rem
  width: 100%
  margin: 0 1rem

  .dark &
    background-color: $gray-800

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

  .dark &
    color: $white

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

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

// Responsive adjustments
@media (max-width: 768px)
  .admin-settings__tabs
    gap: 1rem
    padding: 0 1rem

  .admin-settings__tab-content
    padding: 1rem

  .admin-settings__domain-item
    flex-direction: column
    align-items: flex-start
    gap: 1rem

  .admin-settings__domain-actions
    width: 100%
    justify-content: flex-end

  .admin-settings__language-item
    flex-direction: column
    align-items: flex-start
    gap: 1rem

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