/* The integration's default injected base.css file */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  * {
    @apply outline-none text-pretty select-none;
    box-sizing: border-box;
  }

  /* Добавляем стили только для focus-visible (tab-focus) */
  *:focus-visible {
    @apply rounded-sm outline-none ring-1 ring-primary-400 ring-offset-2 ring-offset-zinc-950/0;
  }

  /* Убираем стандартный браузерный outline и ring при обычном фокусе */
  *:focus:not(:focus-visible) {
    @apply outline-none ring-0 ring-offset-0;
  }

  /* Специальные стили для полей ввода формы */
  input:focus,
  textarea:focus,
  select:focus {
    @apply outline-none ring-0 ring-offset-0;
  }

  /* Убираем стандартный браузерный outline */
  *:focus {
    outline: none;
  }

  a:hover {
    cursor: pointer !important;
  }

  /* Секция с настройками контейнера для markdown-контента */
  .prose-container {
    @apply w-full text-zinc-300/90 text-base leading-relaxed text-pretty font-light;
    letter-spacing: 0.01em;

    /* Стили для ссылок в Markdown-файлах - особый цвет для ссылок */
    & a {
      @apply text-primary-300 hover:text-primary-400 underline underline-offset-2 transition-all duration-200;
    }

    /* Увеличиваем пространство между параграфами для лучшей читаемости */
    & p {
      @apply mb-8;
      margin-left: auto;
      margin-right: auto;
    }

    /* Стиль для заголовков внутри контента - заголовки должны быть белыми */
    & h1,
    & h2,
    & h3,
    & h4 {
      @apply mt-8 mb-4 text-zinc-100;
    }

    /* Стили для заголовков разных уровней */
    & h1 {
      @apply mt-12 mb-6 font-bold text-zinc-100 text-3xl lg:text-5xl;
      padding-bottom: 0.75rem;
    }

    & h2 {
      @apply mt-12 mb-5 font-semibold text-zinc-100 text-2xl lg:text-3xl;
      position: relative;
    }

    /* Декоративный элемент для h2 */
    & h2::before {
      content: "";
      position: absolute;
      bottom: -0.5rem;
      left: 0;
      width: 4rem;
      height: 3px;
      border-radius: 2px;
    }

    & h3 {
      @apply mt-10 mb-4 font-medium text-primary-200 text-xl lg:text-2xl;
      padding-left: 0.5rem;
    }

    & h4 {
      @apply mt-8 mb-3 font-medium text-zinc-100 text-lg;
      letter-spacing: 0.01em;
    }

    /* Особый стиль для списков */
    & ul,
    & ol {
      @apply space-y-3 mb-8 pl-8;
    }

    /* Улучшаем стили для списков */
    & ul {
      @apply space-y-2 mt-6 mb-10 pl-4 list-disc;
      list-style-position: outside;
    }

    & ol {
      @apply space-y-2 mt-6 mb-10 pl-0 list-decimal;
      list-style-position: outside;
    }

    /* Отступы пунктов списка */
    & li {
      @apply mb-2 pl-1;
      display: list-item;
      margin-left: auto;
      margin-right: auto;
    }

    /* Отступы для последнего элемента списка */
    & li:last-child {
      @apply mb-0;
    }

    /* Вложенные списки */
    & ul ul,
    & ol ol,
    & ul ol,
    & ol ul {
      @apply mt-2 mb-1 ml-2;
    }

    /* Стиль для параграфа после списка */
    & ul+p,
    & ol+p {
      @apply mt-8;
    }

    /* Увеличенные отступы для блочных элементов */
    & blockquote {
      @apply my-8 py-1 pl-6 border-primary-400 border-l-4 italic;
    }

    /* Добавим стили для выделения кода */
    & code {
      @apply bg-zinc-800 px-1.5 py-0.5 rounded-md font-mono text-sm;
    }

    /* Улучшенное форматирование для блоков кода */
    & pre {
      @apply bg-zinc-900 my-6 p-4 border border-zinc-800 rounded-lg overflow-x-auto;
    }

    & pre code {
      @apply bg-transparent p-0;
    }

    /* Стили для горизонтальных разделителей */
    & hr {
      @apply my-12 border-zinc-800;
    }

    /* Стили для изображений */
    & img {
      @apply shadow-lg mx-auto my-8 rounded-lg max-w-full;
      max-height: 70vh;
      object-fit: contain;
    }

    /* Стиль для элементов strong и bold - выделения должны быть белыми */
    & strong,
    & b {
      @apply font-semibold text-zinc-100;
    }

    /* Более четкое разделение смысловых блоков */
    & h2+p {
      @apply mt-6;
    }

    & h3+p {
      @apply mt-4;
    }

    /* Улучшаем визуальное разделение блоков для лучшего понимания структуры */
    &>p {
      @apply my-6;
    }

    &>p+h2,
    &>p+h3 {
      @apply mt-12;
    }
  }

  /* Глобальный ограничитель ширины контейнера */
  .main-max-width {
    @apply px-[24px];
    max-width: 1240px;

    &.no-padding {
      @apply px-0 !important;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    @apply leading-none lg:leading-relaxed;
    font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  }

  h1 {
    @apply font-bold text-3xl lg:text-5xl !important;
  }

  h2 {
    @apply my-[12px] lg:my-[24px] font-semibold text-2xl lg:text-4xl !important;
  }

  h3 {
    @apply font-semibold text-xl lg:text-2xl !important;
  }

  p,
  ul,
  li {
    @apply text-[16px] leading-[1.6rem];
  }

  .hero-title {
    @apply lg:text-5xl uppercase tracking-[0.10rem] !important;
  }

  .medium-heading {
    @apply font-medium text-2xl lg:text-4xl !important;
  }

  .hero-description {
    @apply pt-3 w-fit max-w-[100%] font-medium text-zinc-400 text-lg lg:text-xl !important;
  }

  .hero-buttons {
    @apply flex md:flex-row flex-col gap-4 md:gap-3 mt-[32px];
  }

  .separator {
    @apply block bg-gradient-to-r h-[2px] w-[100%] mx-auto border-0 rounded-sm
  }

  .silver {
    @apply from-zinc-300
  }

  .gold {
    @apply from-primary-300
  }

  .text-gold {
    @apply bg-clip-text bg-gradient-to-b from-primary-400 via-primary-100 to-primary-400 text-transparent;
  }

  .text-silver {
    @apply bg-clip-text bg-gradient-to-b from-zinc-400 via-zinc-100 to-zinc-500 text-transparent;
  }

  .table-wrapper {
    @apply w-full overflow-x-auto lg:overflow-x-visible;
    @apply relative;
  }

  table {
    @apply mt-[32px] w-full;
  }

  .fixed-column {
    @apply lg:relative left-0 z-10 sticky bg-zinc-950 lg:bg-zinc-950/0;

    &::after {
      content: "";
      @apply top-0 right-0 absolute bg-zinc-800 w-[1px] lg:w-[0px] h-full;
    }
  }

  .fixed-column {
    @apply max-md:max-w-[100px] max-md:break-words max-md:text-wrap max-md:hyphens-auto;
  }

  thead {
    @apply border-zinc-800 border-b-2 uppercase;
  }

  thead tr th:first-child {
    @apply text-primary-300 text-left;
  }

  thead tr th {
    @apply pb-4;
  }

  thead tr th span {
    @apply text-zinc-300 text-sm;
  }

  tbody tr {
    @apply border-zinc-900 border-b last:border-none;
  }

  tbody tr td {
    @apply px-4 py-3;
    vertical-align: top;
  }

  tbody tr td:first-child {
    @apply pr-6 pl-0 text-primary-300 text-left;
  }

  /* Контроль переноса текста для всех текстовых блоков */
  p,
  h1,
  h2,
  h3,
  h4,
  div,
  span {
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .support-card {
    @apply flex flex-col gap-3 bg-zinc-900/40 hover:bg-primary-300/10 p-4 border border-zinc-800 hover:border-primary-300 rounded-[8px] transition-all;

    .icon {
      @apply w-12 h-12 text-primary-300;
    }
  }

  /* ===== ОБЩИЕ СТИЛИ ДЛЯ КОМПОНЕНТОВ СЕТОК ПРОДУКТОВ ===== */

  /* Основной контейнер-обёртка для всех компонентов с сетками продуктов */
  .product-grid-wrapper {
    @apply flex lg:flex-row flex-col gap-[16px] pb-12 w-[100%];

    /* Модификатор для добавления отступов снизу и центрирования */
    &.with-margin {
      @apply mx-auto mb-12;
    }
  }

  /* Боковая навигационная панель для всех компонентов с сетками продуктов */
  .product-nav-bar {
    @apply top-[60px] lg:top-[80px] sticky bg-zinc-900 lg:bg-zinc-900/20 border-zinc-900 px-[8px] py-[8px] lg:py-[32px] lg:px-[16px] border rounded-[8px] w-full lg:w-[400px] lg:min-w-[200px] h-fit max-h-[500px] overflow-hidden transition-all duration-200 z-[20];

    /* Стили для списка навигации */
    & ul {
      @apply flex lg:flex-col flex-nowrap gap-[32px] lg:gap-[8px] overflow-x-auto overflow-y-hidden lg:overflow-y-auto;

      /* Стили для элементов списка и ссылок */
      & li>a {
        @apply flex flex-shrink-0 items-center gap-[12px] hover:bg-zinc-900 p-2 rounded-[8px] text-zinc-400 hover:text-zinc-100 whitespace-nowrap transition-all duration-200 cursor-pointer;

        /* Стили для иконок продуктов в навигации */
        & img {
          @apply w-[24px] h-fit;
        }
      }
    }
  }

  /* Колонка с карточками продуктов */
  .product-cards-col {
    @apply flex flex-col gap-[16px] w-full;
  }

  /* Базовая карточка продукта */
  .product-card {
    @apply border-zinc-900 p-[32px] border rounded-[8px] w-full hover:bg-zinc-900/20 transition-all duration-200;
    scroll-margin-top: 80px;
  }

  /* Заголовок карточки продукта */
  .product-card-head {
    @apply flex lg:flex-row flex-col gap-[24px];

    /* Стили для иконки продукта в заголовке */
    & img {
      @apply w-[60px] h-[60px];
      /* Базовый стиль для иконки - может быть переопределён в компонентах */
    }

    /* Информация о продукте */
    & .product-card-info {
      @apply flex flex-col gap-2;

      /* Название продукта */
      & .product-title {
        @apply mb-[-4px] font-medium text-2xl;
      }

      /* Описание продукта */
      & .product-description {
        @apply m-0 text-zinc-400 text-lg;
      }
    }
  }

  /* Тело карточки продукта */
  .product-card-body {
    @apply flex flex-col gap-2;

    /* Модификатор для добавления отступа слева */
    &.with-left-padding {
      @apply gap-[16px] py-[16px] lg:pl-[84px];
    }
  }

  /* Подвал карточки продукта с кнопками */
  .product-card-footer {
    @apply flex lg:flex-row flex-col gap-3 pt-[24px];

    /* Стили для текста в подвале */
    & p {
      @apply m-0 w-full text-zinc-600 text-sm;
    }
  }

  /* ===== СТИЛИ ДЛЯ ИКОНОК ПРОДУКТОВ В РАЗНЫХ ТИПАХ КАРТОЧЕК ===== */

  /* Иконки для программных продуктов */
  .product-card-head .software-icon {
    @apply bg-zinc-900 p-3 rounded-[8px];
  }

  /* Иконки для аппаратных продуктов */
  .product-card-head .hardware-icon {
    @apply bg-zinc-900/20 p-0 rounded-sm;
  }

  /* ===== СТИЛИ ДЛЯ СЕКЦИЙ ПОДДЕРЖКИ ===== */

  /* Контейнер для секций поддержки */
  .support-sections {
    @apply flex flex-col gap-[16px];
  }

  /* Отдельная секция поддержки */
  .support-section {
    @apply space-y-4;
  }

  /* Заголовок секции поддержки */
  .support-section-title,
  .section-title {
    @apply mb-6 font-medium text-zinc-300 text-xl;
  }

  /* Элементы поддержки */
  .support-items {
    @apply flex flex-wrap gap-3;
  }

  /* Подсекция моделей */
  .model-subsection {
    @apply flex flex-col gap-[8px] mt-[8px];
  }

  /* Заголовок модели */
  .model-title {
    @apply mb-4 font-semibold text-zinc-200 text-xl;
  }

  /* Подсекция модели */
  .model-section {
    @apply space-y-4;
  }

  /* ===== СТИЛИ ДЛЯ ВИДЕО ЭЛЕМЕНТОВ ===== */



  /* Карточка видео */
  .video-card {
    @apply bg-zinc-900 border border-zinc-800 hover:border-primary-300 rounded-lg overflow-hidden transition-colors duration-200;
    width: 100% !important;
    min-width: 0;
    flex: 1 1 0%;
  }

  /* Обложка видео */
  .video-cover {
    @apply relative bg-zinc-800 w-full aspect-video;

    & img {
      @apply w-full h-full object-cover;
    }
  }



  /* Заголовок видео */
  .video-title {
    @apply p-4 font-medium text-zinc-200 leading-tight;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
  }

  /* Сетка видео */
  .video-grid {
    @apply gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
  }

  @media (min-width: 768px) {
    .video-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .video-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* Сетка видео для страницы загрузок (3 колонки) */
  .video-grid-downloads {
    @apply gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
  }

  @media (min-width: 768px) {
    .video-grid-downloads {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .video-grid-downloads {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Кнопка воспроизведения */
  .play-button {
    @apply absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 opacity-0 hover:opacity-100 transition-opacity duration-200;
  }

  /* Иконка воспроизведения */
  .play-icon {
    @apply w-12 h-12 text-white;
  }

  /* Контейнер поддержки оборудования */
  .hardware-support {
    @apply space-y-8 w-full;
  }

  /* Сообщение об отсутствии поддержки */
  .no-support-message {
    @apply px-6 py-12 text-center;
  }

  /* ===== СТИЛИ ДЛЯ ТАБОВ ===== */

  /* Панель табов */
  .tabs-panel {
    @apply z-10 relative flex gap-3 py-[16px];

    /* Псевдоэлемент для разделительной линии */
    &::after {
      content: "";
      @apply right-0 bottom-0 md:bottom-[16px] left-0 absolute bg-zinc-800 h-[1px];
    }

    /* Кнопки табов */
    & button {
      @apply z-10 relative pb-3 border-transparent border-b focus:outline-none text-zinc-400 text-lg transition-all duration-200;

      &:hover {
        @apply text-zinc-100;
      }

      &:active {
        @apply border-primary-400 text-primary-300;
      }

      /* Активная кнопка таба */
      &.active {
        @apply border-primary-400 text-primary-300;
      }
    }

    /* Стили для ProductTabs - увеличенные отступы для основной навигации */
    &.product-tabs {
      @apply gap-4 lg:gap-8 mt-0 mb-10;

      /* Мобильные стили для sticky навигации */
      @apply max-md:top-[48px] max-md:z-[999] max-md:sticky max-md:bg-zinc-950 max-md:shadow-lg max-md:shadow-zinc-950 max-md:pb-0;

      /* Кнопки с иконками */
      & button {
        @apply flex items-center gap-2 font-semibold text-xl uppercase;
      }
    }
  }

  /* Контент таба */
  .tab-content {
    @apply flex flex-col;

    /* Описание в контенте таба */
    & .tab-description {
      @apply flex flex-col gap-2 pb-[16px];

      & .tab-description-title {
        @apply pb-[4px] font-medium;
      }

      & .tab-description-subtitle {
        @apply font-light text-zinc-400;
      }
    }
  }

  /* ===== ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ОПИСАНИЙ В ТАБАХ ===== */

  /* Стили для списков в описаниях табов */
  :global(.tab-description .tab-description-title ul) {
    @apply ml-4 pt-[16px] list-disc;
  }

  :global(.tab-description .tab-description-title li) {
    @apply mb-1 font-normal text-zinc-300 text-sm;
  }
}

html,
body {
  min-height: 100dvh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  scroll-behavior: smooth;
}