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

.admin-dashboard
  max-width: 1200px

.dashboard-stats
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
  gap: var(--spacing-lg)
  margin-bottom: var(--spacing-2xl)

.stat-card
  background: var(--color-white)
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  display: flex
  align-items: center
  gap: var(--spacing-lg)
  transition: var(--transition-fast)
  
  &:hover
    transform: translateY(-2px)
    box-shadow: var(--shadow-md)
  
  .theme-dark &
    background: var(--color-dark)

.stat-card__icon
  font-size: 2.5rem

.stat-card__value
  font-size: var(--font-size-2xl)
  font-weight: var(--font-weight-bold)
  color: var(--color-primary)

.stat-card__label
  color: var(--color-secondary)
  font-size: var(--font-size-sm)

.dashboard-actions
  margin-bottom: var(--spacing-2xl)

.action-grid
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
  gap: var(--spacing-lg)
  margin-top: var(--spacing-lg)

.action-card
  background: var(--color-white)
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  text-decoration: none
  color: inherit
  display: flex
  align-items: center
  gap: var(--spacing-lg)
  transition: var(--transition-fast)
  
  &:hover
    background: var(--color-primary-10)
    transform: translateY(-2px)
    box-shadow: var(--shadow-md)
    color: inherit
  
  .theme-dark &
    background: var(--color-dark)
    
    &:hover
      background: var(--color-primary-20)

.action-card__icon
  font-size: 2rem

.action-card__text
  font-weight: var(--font-weight-medium)

.dashboard-activity
  background: var(--color-white)
  padding: var(--spacing-xl)
  border-radius: var(--border-radius)
  box-shadow: var(--shadow-sm)
  
  .theme-dark &
    background: var(--color-dark)

.activity-loading
  text-align: center
  padding: var(--spacing-2xl)
  color: var(--color-secondary)

.activity-list
  space-y: var(--spacing-md)

.activity-item
  display: flex
  align-items: center
  gap: var(--spacing-md)
  padding: var(--spacing-md)
  border-bottom: 1px solid var(--border-color)
  
  &:last-child
    border-bottom: none

.activity-icon
  font-size: 1.5rem

.activity-content
  flex: 1
  display: flex
  flex-direction: column

.activity-time
  color: var(--color-secondary)
  font-size: var(--font-size-sm)

@media (max-width: 768px)
  .dashboard-stats
    grid-template-columns: 1fr 1fr
  
  .action-grid
    grid-template-columns: 1fr