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

@css {
  .admin {
    @apply min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900;
  }

  /* Header */
  .admin__header {
    @apply bg-white dark:bg-gray-800 shadow-sm z-40 sticky top-0;
  }

  .admin__header-content {
    @apply px-4 sm:px-6 py-3 sm:py-4;
  }

  .admin__header-top {
    @apply flex items-center justify-between;
  }

  .admin__header-title {
    @apply text-lg sm:text-xl font-bold text-gray-800 dark:text-white;
  }

  .admin__domain-info {
    @apply text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2;
  }

  .admin__mobile-menu-btn {
    @apply lg:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200;
  }

  /* Body layout */
  .admin__body {
    @apply flex flex-1 flex-col lg:flex-row;
  }

  /* Sidebar - positioned above header in mobile */
  .admin__sidebar {
    @apply w-full lg:w-64 bg-white dark:bg-gray-800 shadow-2xl lg:shadow-none z-50 fixed lg:static inset-0 transform transition-transform duration-300 ease-in-out;
  }

  .admin__sidebar--hidden {
    @apply -translate-x-full lg:translate-x-0;
  }

  .admin__sidebar--visible {
    @apply translate-x-0;
  }

  .admin__sidebar-overlay {
    @apply lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40;
  }

  .admin__sidebar-header {
    @apply lg:hidden flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
  }

  .admin__sidebar-title {
    @apply text-lg font-medium text-gray-800 dark:text-white;
  }

  .admin__sidebar-close {
    @apply lg:hidden p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200;
  }

  .admin__nav {
    @apply p-4 space-y-2 h-full overflow-y-auto;
  }

  .admin__nav-item {
    @apply flex items-center space-x-3 px-3 sm:px-4 py-2 sm:py-3 rounded-lg transition-colors duration-200 text-sm sm:text-base;
  }

  .admin__nav-item--active {
    @apply bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300;
  }

  .admin__nav-item--inactive {
    @apply text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-white;
  }

  .admin__nav-item-content {
    @apply flex items-center space-x-3;
  }

  .admin__nav-icon {
    @apply w-4 h-4 sm:w-5 sm:h-5 flex-shrink-0;
  }

  .admin__nav-text {
    @apply font-medium truncate;
  }

  /* Main content */
  .admin__main {
    @apply flex-1 p-4 sm:p-6 lg:p-8 overflow-auto min-h-0;
  }
}

/* Медиа-запросы для планшетов */
@media (max-width: 1024px) {
  .admin__sidebar {
    @apply w-80;
  }
}

/* Медиа-запросы для очень маленьких экранов */
@media (max-width: 360px) {
  .admin__header-content {
    @apply px-3 py-2;
  }
  
  .admin__header-title {
    @apply text-base;
  }
  
  .admin__nav {
    @apply p-3;
  }
  
  .admin__nav-item {
    @apply px-2 py-2 text-xs;
  }
  
  .admin__main {
    @apply p-3;
  }
}