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

.admin-layout
  display: flex
  min-height: 100vh
  background: var(--color-light-10)

.admin-sidebar
  width: 280px
  background: var(--color-white)
  box-shadow: var(--shadow-md)
  border-right: 1px solid var(--border-color)
  display: flex
  flex-direction: column
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

.admin-sidebar__header
  padding: var(--spacing-xl)
  border-bottom: 1px solid var(--border-color)
  
  h2
    font-size: var(--font-size-lg)
    font-weight: var(--font-weight-bold)
    margin-bottom: var(--spacing-xs)
    color: var(--color-primary)
  
  p
    font-size: var(--font-size-sm)
    color: var(--color-secondary)

.admin-nav__list
  list-style: none
  padding: var(--spacing-md) 0
  flex: 1

.admin-nav__item
  margin-bottom: var(--spacing-xs)

.admin-nav__link
  display: block
  padding: var(--spacing-md) var(--spacing-xl)
  text-decoration: none
  color: var(--color-dark)
  transition: var(--transition-fast)
  border-left: 3px solid transparent
  
  &:hover, &.router-link-active
    background: var(--color-primary-10)
    border-left-color: var(--color-primary)
    color: var(--color-primary)
  
  .theme-dark &
    color: var(--color-light)
    
    &:hover, &.router-link-active
      background: var(--color-primary-20)
      color: var(--color-light)

.admin-main
  flex: 1
  display: flex
  flex-direction: column

.admin-header
  background: var(--color-white)
  padding: var(--spacing-lg) var(--spacing-xl)
  border-bottom: 1px solid var(--border-color)
  display: flex
  justify-content: space-between
  align-items: center
  
  .theme-dark &
    background: var(--color-dark)
    color: var(--color-light)

.admin-header__user
  display: flex
  align-items: center
  gap: var(--spacing-md)

.admin-header__breadcrumbs
  color: var(--color-secondary)
  font-size: var(--font-size-sm)
  
  a
    color: var(--color-primary)
    text-decoration: none
    
    &:hover
      text-decoration: underline

.admin-content
  flex: 1
  padding: var(--spacing-xl)
  overflow-y: auto

// Адаптивность
@media (max-width: 768px)
  .admin-layout
    flex-direction: column
  
  .admin-sidebar
    width: 100%
    height: auto
  
  .admin-nav__list
    display: flex
    overflow-x: auto
    padding: var(--spacing-sm)
  
  .admin-nav__item
    margin-bottom: 0
    margin-right: var(--spacing-sm)
  
  .admin-nav__link
    white-space: nowrap
    border-left: none
    border-bottom: 3px solid transparent
    
    &:hover, &.router-link-active
      border-left: none
      border-bottom-color: var(--color-primary)
  
  .admin-header
    flex-direction: column
    gap: var(--spacing-md)
    align-items: flex-start