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

.admin
  display: flex
  flex-direction: column
  min-height: 100vh
  background-color: $gray-50

  .dark &
    background-color: $gray-900

.admin__header
  background-color: $white
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
  position: sticky
  top: 0
  z-index: 50
  border-bottom: 1px solid $gray-200

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

.admin__header-content
  display: flex
  align-items: center
  justify-content: space-between
  padding: 1rem 1.5rem
  max-width: 1200px
  margin: 0 auto

.admin__brand
  display: flex
  align-items: center
  gap: 0.75rem

.admin__logo
  width: 2rem
  height: 2rem
  object-fit: contain

.admin__company-name
  font-size: 1.25rem
  font-weight: bold
  color: $gray-900

  .dark &
    color: $white

.admin__domain-info
  font-size: 0.875rem
  color: $gray-600
  background-color: $gray-100
  padding: 0.25rem 0.75rem
  border-radius: 0.375rem

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

.admin__user-menu
  display: flex
  align-items: center
  gap: 0.5rem

.admin__theme-toggle
  padding: 0.5rem
  border-radius: 0.375rem
  background-color: $gray-100
  color: $gray-600
  transition: all 0.2s ease-in-out
  border: none
  cursor: pointer

  &:hover
    background-color: $gray-200

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

    &:hover
      background-color: $gray-600

.admin__nav
  background-color: $white
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
  border-bottom: 1px solid $gray-200
  position: sticky
  top: 64px
  z-index: 40

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

.admin__nav-content
  display: flex
  gap: 0
  overflow-x: auto
  padding: 0 1.5rem
  max-width: 1200px
  margin: 0 auto

  &::-webkit-scrollbar
    display: none

  -ms-overflow-style: none
  scrollbar-width: none

.admin__nav-item
  display: flex
  align-items: center
  gap: 0.5rem
  padding: 0.75rem 1rem
  color: $gray-600
  text-decoration: none
  transition: all 0.2s ease-in-out
  border: none
  background: none
  cursor: pointer
  white-space: nowrap
  border-bottom: 2px solid transparent

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

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

.admin__nav-item--active
  color: $primary-600
  border-bottom-color: $primary-600
  background-color: $primary-50

  .dark &
    color: $primary-400
    border-bottom-color: $primary-400
    background-color: $primary-900

  &:hover
    color: $primary-700
    background-color: $primary-100

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

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

  .dark &
    color: $gray-400

.admin__nav-icon
  width: 1.25rem
  height: 1.25rem
  flex-shrink: 0

.admin__nav-text
  font-weight: 500
  font-size: 0.875rem

.admin__main
  flex: 1
  padding: 1.5rem

.admin__content
  max-width: 1200px
  margin: 0 auto

// Mobile styles
@media (max-width: 768px)
  .admin__header-content
    padding: 0.75rem 1rem
    flex-wrap: wrap
    gap: 0.5rem

  .admin__brand
    order: 1

  .admin__domain-info
    order: 3
    width: 100%
    text-align: center
    margin-top: 0.5rem

  .admin__user-menu
    order: 2

  .admin__nav-content
    padding: 0 1rem
    gap: 0

  .admin__nav-item
    padding: 0.75rem 0.5rem
    font-size: 0.875rem

  .admin__nav-text
    font-size: 0.8rem

  .admin__main
    padding: 1rem

// Small mobile devices
@media (max-width: 480px)
  .admin__company-name
    font-size: 1.1rem

  .admin__nav-item
    padding: 0.5rem 0.25rem

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

  .admin__nav-text
    font-size: 0.75rem