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

// Admin panel responsive styles
.admin
  display: flex
  min-height: 100vh
  background-color: #f9fafb
  position: relative

  &.dark
    background-color: #111827

// Mobile toggle button
.admin__mobile-toggle
  display: none
  position: fixed
  top: 1rem
  left: 1rem
  z-index: 1000
  padding: 0.5rem
  background-color: #ef4444
  border-radius: 0.375rem
  cursor: pointer
  border: none

  @media (max-width: 768px)
    display: block

.admin__burger
  width: 1.5rem
  height: 1.125rem
  position: relative
  transition: all 0.3s ease-in-out

  span
    display: block
    height: 2px
    width: 100%
    background-color: #ffffff
    border-radius: 1px
    transition: all 0.3s ease-in-out
    transform-origin: center

    &:nth-child(2)
      margin: 0.25rem 0

.admin__burger--active
  span
    &:nth-child(1)
      transform: rotate(45deg) translate(6px, 6px)
    &:nth-child(2)
      opacity: 0
    &:nth-child(3)
      transform: rotate(-45deg) translate(6px, -6px)

// Sidebar styles
.admin__sidebar
  width: 16rem
  background-color: #ffffff
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1)
  transition: all 0.3s ease-in-out
  display: flex
  flex-direction: column
  position: fixed
  left: 0
  top: 0
  height: 100vh
  z-index: 100
  overflow-y: auto

  &.dark
    background-color: #1f2937

  @media (max-width: 768px)
    transform: translateX(-100%)
    
    &.admin__sidebar--mobile-open
      transform: translateX(0)

  &.admin__sidebar--collapsed
    width: 5rem

.admin__sidebar-header
  padding: 1.5rem 1rem
  border-bottom: 1px solid #e5e7eb
  display: flex
  align-items: center
  justify-content: space-between

  &.dark
    border-bottom-color: #374151

.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.125rem
  font-weight: bold
  color: #111827
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

  &.dark
    color: #ffffff

.admin__sidebar-toggle
  padding: 0.5rem
  border-radius: 0.375rem
  cursor: pointer
  border: none
  background: none
  color: #6b7280
  transition: all 0.2s ease-in-out

  &:hover
    background-color: #f3f4f6
    color: #111827

  &.dark
    color: #9ca3af

    &:hover
      background-color: #374151
      color: #ffffff

.admin__toggle-icon
  width: 1rem
  height: 1rem
  transition: transform 0.3s ease-in-out

  &.admin__toggle-icon--collapsed
    transform: rotate(180deg)

// Navigation styles
.admin__nav
  flex: 1
  padding: 1rem 0
  display: flex
  flex-direction: column
  gap: 1.5rem

.admin__nav-section
  padding: 0 1rem

.admin__nav-section-title
  font-size: 0.75rem
  font-weight: 600
  color: #6b7280
  text-transform: uppercase
  letter-spacing: 0.05em
  margin-bottom: 0.75rem

  &.dark
    color: #9ca3af

.admin__nav-list
  list-style: none
  margin: 0
  padding: 0
  display: flex
  flex-direction: column
  gap: 0.25rem

.admin__nav-item
  margin: 0

.admin__nav-link
  display: flex
  align-items: center
  gap: 0.75rem
  padding: 0.75rem 1rem
  border-radius: 0.5rem
  text-decoration: none
  transition: all 0.2s ease-in-out
  color: #374151
  position: relative

  &:hover
    background-color: #f3f4f6
    color: #111827

  &.dark
    color: #d1d5db

    &:hover
      background-color: #374151
      color: #ffffff

  &.admin__nav-item--active
    background-color: #fef2f2
    color: #dc2626
    font-weight: 500

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

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

.admin__nav-text
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  flex: 1

.admin__sidebar--collapsed .admin__nav-text
  display: none

.admin__nav-badge
  background-color: #ef4444
  color: #ffffff
  font-size: 0.75rem
  padding: 0.125rem 0.5rem
  border-radius: 9999px
  font-weight: 500

// Sidebar footer
.admin__sidebar-footer
  padding: 1rem
  border-top: 1px solid #e5e7eb
  margin-top: auto

  &.dark
    border-top-color: #374151

.admin__user-info
  display: flex
  align-items: center
  gap: 0.75rem
  margin-bottom: 1rem

.admin__user-avatar
  width: 2.5rem
  height: 2.5rem
  border-radius: 50%
  background-color: #ef4444
  color: #ffffff
  display: flex
  align-items: center
  justify-content: center
  font-weight: 600
  font-size: 0.875rem

.admin__user-details
  display: flex
  flex-direction: column
  flex: 1
  min-width: 0

.admin__user-name
  font-weight: 600
  color: #111827
  font-size: 0.875rem
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

  &.dark
    color: #ffffff

.admin__user-role
  font-size: 0.75rem
  color: #6b7280

  &.dark
    color: #9ca3af

.admin__logout-btn
  width: 100%
  display: flex
  align-items: center
  gap: 0.75rem
  padding: 0.75rem 1rem
  border-radius: 0.5rem
  background: none
  border: 1px solid #e5e7eb
  color: #374151
  cursor: pointer
  transition: all 0.2s ease-in-out
  font-size: 0.875rem

  &:hover
    background-color: #f9fafb
    border-color: #d1d5db

  &.dark
    border-color: #4b5563
    color: #d1d5db

    &:hover
      background-color: #374151
      border-color: #6b7280

// Main content area
.admin__main
  flex: 1
  margin-left: 16rem
  transition: all 0.3s ease-in-out
  min-height: 100vh
  display: flex
  flex-direction: column

  &.admin__main--expanded
    margin-left: 5rem

  @media (max-width: 768px)
    margin-left: 0
    
    &.admin__main--mobile-open
      transform: translateX(16rem)

.admin__topbar
  background-color: #ffffff
  border-bottom: 1px solid #e5e7eb
  padding: 1rem 1.5rem
  display: flex
  align-items: center
  justify-content: space-between

  &.dark
    background-color: #1f2937
    border-bottom-color: #374151

.admin__breadcrumbs
  display: flex
  align-items: center
  gap: 0.5rem
  font-size: 0.875rem

.admin__breadcrumb-link
  color: #6b7280
  text-decoration: none
  transition: color 0.2s ease-in-out

  &:hover
    color: #ef4444

  &.dark
    color: #9ca3af

.admin__breadcrumb-current
  color: #111827
  font-weight: 500

  &.dark
    color: #ffffff

.admin__breadcrumb-separator
  color: #9ca3af
  margin-left: 0.5rem

.admin__actions
  display: flex
  align-items: center
  gap: 0.5rem

.admin__action-btn
  padding: 0.5rem
  border-radius: 0.375rem
  background: none
  border: none
  color: #6b7280
  cursor: pointer
  transition: all 0.2s ease-in-out
  position: relative

  &:hover
    background-color: #f3f4f6
    color: #111827

  &.dark
    color: #9ca3af

    &:hover
      background-color: #374151
      color: #ffffff

// Notifications
.admin__notifications
  position: relative

.admin__notifications-btn
  position: relative

.admin__notification-badge
  position: absolute
  top: -0.25rem
  right: -0.25rem
  background-color: #ef4444
  color: #ffffff
  font-size: 0.75rem
  padding: 0.125rem 0.375rem
  border-radius: 9999px
  min-width: 1.25rem
  text-align: center

.admin__notifications-dropdown
  position: absolute
  top: 100%
  right: 0
  width: 20rem
  background-color: #ffffff
  border: 1px solid #e5e7eb
  border-radius: 0.5rem
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
  z-index: 50
  margin-top: 0.5rem

  &.dark
    background-color: #1f2937
    border-color: #374151

.admin__notifications-header
  padding: 1rem
  border-bottom: 1px solid #e5e7eb
  display: flex
  align-items: center
  justify-content: space-between

  &.dark
    border-bottom-color: #374151

.admin__notifications-count
  font-size: 0.875rem
  color: #ef4444
  font-weight: 500

.admin__notifications-list
  max-height: 20rem
  overflow-y: auto

.admin__notification-item
  padding: 1rem
  border-bottom: 1px solid #f3f4f6
  display: flex
  align-items: flex-start
  gap: 0.75rem
  transition: background-color 0.2s ease-in-out

  &:hover
    background-color: #f9fafb

  &.dark
    border-bottom-color: #374151

    &:hover
      background-color: #374151

  &.admin__notification-item--unread
    background-color: #fef2f2

    &.dark
      background-color: #7f1d1d

.admin__notification-icon
  width: 1.5rem
  height: 1.5rem
  flex-shrink: 0
  color: #ef4444

.admin__notification-content
  flex: 1
  min-width: 0

.admin__notification-title
  font-size: 0.875rem
  color: #111827
  margin: 0 0 0.25rem 0
  line-height: 1.4

  &.dark
    color: #ffffff

.admin__notification-time
  font-size: 0.75rem
  color: #6b7280

.admin__notification-action
  padding: 0.25rem
  background: none
  border: none
  color: #9ca3af
  cursor: pointer
  border-radius: 0.25rem
  font-size: 1.125rem
  line-height: 1

  &:hover
    color: #6b7280
    background-color: #f3f4f6

  &.dark
    &:hover
      background-color: #4b5563
      color: #d1d5db

// Content area
.admin__content
  flex: 1
  padding: 1.5rem
  overflow-y: auto

// Overlay for mobile menu
.admin__overlay
  position: fixed
  inset: 0
  background-color: rgba(0, 0, 0, 0.5)
  z-index: 90
  display: none

  @media (max-width: 768px)
    display: block

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

  .admin__main
    margin-left: 14rem

  .admin__main--expanded
    margin-left: 4rem

  .admin__sidebar--collapsed
    width: 4rem

@media (max-width: 768px)
  .admin__sidebar
    width: 16rem

  .admin__main
    margin-left: 0

  .admin__main--mobile-open
    transform: translateX(16rem)

  .admin__topbar
    padding: 1rem

  .admin__content
    padding: 1rem

  .admin__breadcrumbs
    font-size: 0.8rem

  .admin__notifications-dropdown
    width: 18rem
    right: -1rem

@media (max-width: 480px)
  .admin__mobile-toggle
    top: 0.5rem
    left: 0.5rem

  .admin__topbar
    flex-direction: column
    gap: 1rem
    align-items: flex-start

  .admin__actions
    width: 100%
    justify-content: flex-end

  .admin__notifications-dropdown
    width: 16rem
    right: -2rem