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

@css {
  .admin-settings {
    @apply space-y-4 sm:space-y-6;
  }

  .admin-settings__header {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 sm:pb-6;
  }

  .admin-settings__title {
    @apply text-xl sm:text-2xl font-bold text-gray-900 dark:text-white;
  }

  .admin-settings__subtitle {
    @apply text-gray-600 dark:text-gray-400 mt-1 sm:mt-2 text-sm sm:text-base;
  }

  .admin-settings__content {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm;
  }

  .admin-settings__tabs {
    @apply border-b border-gray-200 dark:border-gray-700 flex space-x-2 sm:space-x-8 px-4 sm:px-6 overflow-x-auto;
  }

  .admin-settings__tab {
    @apply py-3 sm:py-4 px-2 sm:px-1 border-b-2 font-medium text-sm transition-colors duration-200 whitespace-nowrap flex-shrink-0;
  }

  .admin-settings__tab--active {
    @apply border-primary-500 text-primary-600 dark:text-primary-400;
  }

  .admin-settings__tab--inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600;
  }

  .admin-settings__tab-content {
    @apply p-4 sm:p-6;
  }

  .admin-settings__section {
    @apply mb-6 sm:mb-8;
  }

  .admin-settings__section-title {
    @apply text-base sm:text-lg font-medium text-gray-900 dark:text-white mb-2;
  }

  .admin-settings__section-description {
    @apply text-gray-600 dark:text-gray-400 mb-3 sm:mb-4 text-sm sm:text-base;
  }

  .admin-settings__domains-list {
    @apply space-y-3 sm:space-y-4 mb-4 sm:mb-6;
  }

  .admin-settings__domain-item {
    @apply flex flex-col sm:flex-row sm:items-center sm:justify-between p-3 sm:p-4 border border-gray-200 dark:border-gray-700 rounded-lg gap-3;
  }

  .admin-settings__domain-info {
    @apply flex-1;
  }

  .admin-settings__domain-name {
    @apply font-medium text-gray-900 dark:text-white text-sm sm:text-base;
  }

  .admin-settings__domain-desc {
    @apply text-gray-600 dark:text-gray-400 text-xs sm:text-sm;
  }

  .admin-settings__domain-actions {
    @apply flex space-x-2 self-end sm:self-auto;
  }

  .admin-settings__languages-list {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4;
  }

  .admin-settings__language-item {
    @apply flex items-center justify-between p-3 sm:p-4 border border-gray-200 dark:border-gray-700 rounded-lg;
  }

  .admin-settings__language-info {
    @apply flex items-center space-x-2 sm:space-x-3;
  }

  .admin-settings__language-code {
    @apply bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-xs sm:text-sm font-medium;
  }

  .admin-settings__language-name {
    @apply text-gray-700 dark:text-gray-300 text-sm sm:text-base;
  }

  .admin-settings__language-btn {
    @apply px-2 sm:px-3 py-1 rounded text-xs sm:text-sm font-medium transition-colors duration-200 whitespace-nowrap;
  }

  .admin-settings__language-btn--enabled {
    @apply bg-red-100 text-red-700 hover:bg-red-200 dark:bg-red-900 dark:text-red-300 dark:hover:bg-red-800;
  }

  .admin-settings__language-btn--disabled {
    @apply bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800;
  }

  .admin-settings__form {
    @apply max-w-full sm:max-w-md space-y-3 sm:space-y-4;
  }

  .admin-settings__form-group {
    @apply space-y-1 sm:space-y-2;
  }

  .admin-settings__label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
  }

  .admin-settings__input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm sm:text-base;
  }

  .admin-settings__select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm sm:text-base;
  }

  .admin-settings__checkbox-group {
    @apply space-y-2;
  }

  .admin-settings__checkbox-label {
    @apply flex items-center space-x-2 text-gray-700 dark:text-gray-300 text-sm sm:text-base;
  }

  .admin-settings__checkbox {
    @apply rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 w-4 h-4;
  }

  .admin-settings__btn {
    @apply px-3 sm:px-4 py-2 rounded-lg font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 text-sm sm:text-base;
  }

  .admin-settings__btn--primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }

  .admin-settings__btn--secondary {
    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600;
  }

  .admin-settings__btn--danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
  }

  .admin-settings__modal {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4;
  }

  .admin-settings__modal-content {
    @apply bg-white dark:bg-gray-800 rounded-lg p-4 sm:p-6 max-w-md w-full mx-auto max-h-[90vh] overflow-y-auto;
  }

  .admin-settings__modal-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-3 sm:mb-4;
  }

  .admin-settings__modal-form {
    @apply space-y-3 sm:space-y-4 mb-4 sm:mb-6;
  }

  .admin-settings__modal-actions {
    @apply flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3 justify-end;
  }
}

/* Медиа-запросы для очень маленьких экранов */
@media (max-width: 360px) {
  .admin-settings__domain-actions {
    @apply flex-col space-y-2 space-x-0;
  }
  
  .admin-settings__btn {
    @apply px-2 py-1 text-xs;
  }
}