@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [generate-good-info-php]
 * @summary Индивидуальные стили для сервиса генерации описаний и изображений
 * @created 2025-10
 * @modified 2025-11
 *
 * @file D:/kz/kz-controls/sd1.su/services.sd1.su/services/generate-good-info-php/css/styles.css
 * @link https://services.sd1.su/generate-good-info-php/css/styles.css
 *
 * @remarks
 * - Inline комментарии запрещены
 * =============================================================================
 */

/* TAILWIND UTILITY CLASSES REPLACEMENT */

/* Max width utilities */
.max-w-full
{
  max-width: 100%;
}

/* Height utilities */
.h-auto
{
  height: auto;
}

/* Border radius utilities */
.rounded-lg
{
  border-radius: 0.5rem;
}

/* Shadow utilities */
.shadow-sm
{
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Border utilities */
.border
{
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border);
}

/* Cursor utilities */
.cursor-pointer
{
  cursor: pointer;
}

/* ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ */

/* Переходы (transitions) */
.transition-all
{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Hover эффекты для изображений */
.hover\:shadow-md:hover
{
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.hover\:scale-105:hover
{
  transform: scale(1.05);
}

/* Адаптивные изображения */
.responsive-image
{
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.responsive-image:hover
{
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transform: scale(1.02);
}

/* Контейнеры для изображений */
.generated-image-container
{
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background-secondary);
}

.generated-image-container.has-image
{
  border: none;
  background-color: transparent;
}

/* Drop zone стили */
.drop-zone
{
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-medium);
  padding: 2rem;
  text-align: center;
  background-color: var(--color-background-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.drop-zone:hover
{
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.drop-zone-icon
{
  font-size: 3rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

.drop-zone-text
{
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.drop-zone-hint
{
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Drop zone активное состояние */
.drop-zone-active
{
  border-color: var(--color-primary) !important;
  background-color: var(--color-primary-light) !important;
}

/* Контейнер предварительного просмотра изображения */
.image-preview-container
{
  position: relative;
  background-color: var(--color-background-secondary);
  border-radius: var(--radius-medium);
  padding: 1rem;
  border: 2px dashed var(--color-border);
  text-align: center;
}

/* Имя файла изображения */
.image-filename
{
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

/* Кнопка удаления изображения */
.btn-remove-image
{
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--color-danger);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-remove-image:hover
{
  background-color: var(--color-danger-dark);
  transform: scale(1.1);
}

/* Контейнер предварительного просмотра файла */
.file-preview-container
{
  position: relative;
  background: rgb(243, 244, 246);
  border-radius: 8px;
  padding: 16px;
  border: 2px dashed rgb(209, 213, 219);
  margin-bottom: 16px;
}

/* Изображение предварительного просмотра */
.file-preview-image
{
  max-width: 100%;
  max-height: 192px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Кнопка удаления предварительного просмотра */
.btn-remove-preview
{
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(239, 68, 68, 0.9);
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.btn-remove-preview:hover
{
  background: rgba(220, 38, 38, 1);
}

/* Информация о файле */
.file-preview-info
{
  margin-top: 8px;
  font-size: 14px;
  color: rgb(107, 114, 128);
  text-align: center;
}

/* Состояние отключенной кнопки */
.btn-disabled
{
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Сообщения о статусе */
.status-message-success
{
  background-color: rgb(209, 250, 229);
  border-color: rgb(16, 185, 129);
  color: rgb(6, 95, 70);
}

.status-message-error
{
  background-color: rgb(254, 226, 226);
  border-color: rgb(239, 68, 68);
  color: rgb(153, 27, 27);
}

.status-message-warning
{
  background-color: rgb(254, 243, 199);
  border-color: rgb(245, 158, 11);
  color: rgb(146, 64, 14);
}

.status-message-info
{
  background-color: rgb(219, 234, 254);
  border-color: rgb(59, 130, 246);
  color: rgb(30, 64, 175);
}

/* Стили для header с кнопкой настроек */
.header-content
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.header-text
{
  flex: 1;
}

.header-controls
{
  display: flex;
  gap: 8px;
}

.btn-settings
{
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgb(255, 255, 255);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
}

.btn-settings:hover
{
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Стили для модального окна */
.modal
{
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content
{
  background-color: var(--bg-color, rgb(255, 255, 255));
  margin: 15% auto;
  padding: 0;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-color, rgb(229, 231, 235));
}

.modal-title
{
  margin: 0;
  color: var(--text-color, rgb(31, 41, 55));
  font-size: 18px;
  font-weight: 600;
}

.modal-close
{
  background-image: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary, rgb(107, 114, 128));
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.modal-close:hover
{
  background-color: var(--hover-bg, rgb(243, 244, 246));
}

.modal-body
{
  padding: 20px;
}

.settings-group
{
  margin-bottom: 20px;
}

.settings-label
{
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--text-color, rgb(31, 41, 55));
}

.theme-buttons
{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-theme
{
  padding: 8px 16px;
  border: 1px solid var(--border-color, rgb(209, 213, 219));
  background: var(--bg-color, rgb(255, 255, 255));
  color: var(--text-color, rgb(55, 65, 81));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-theme:hover
{
  background: var(--hover-bg, rgb(249, 250, 251));
  border-color: var(--primary-color, rgb(59, 130, 246));
}

.btn-theme.active
{
  background: var(--primary-color, rgb(59, 130, 246));
  color: rgb(255, 255, 255);
  border-color: var(--primary-color, rgb(59, 130, 246));
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px)
{
  .header-content
  {
    flex-direction: column;
    text-align: center;
  }

  .modal-content
  {
    margin: 10% auto;
    width: 95%;
  }

  .theme-buttons
  {
    justify-content: center;
  }
}