/* ===========================================
   Компонент: tooltip-container
   Файл: static/css/components/tooltip-container.css

   Зависимости:
     variables/_colors.css   (--color-primary-light, --color-primary, ...)
     variables/_spacing.css  (--radius-md, --radius-lg, --z-tooltip)

   Подключение (в main.css или на странице):
     @import "components/tooltip-container.css";

   Или в шаблоне:
     <link rel="stylesheet" href="/static/css/components/tooltip-container.css">
   =========================================== */


/* ─────────────────────────────────────────────
   Обёртка
   ───────────────────────────────────────────── */

.tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ─────────────────────────────────────────────
   Триггер — кликабельный элемент внутри обёртки
   ───────────────────────────────────────────── */

.tooltip-container__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;  /* убираем мигание на iOS */
}


/* ─────────────────────────────────────────────
   Bubble — само облачко тултипа
   ───────────────────────────────────────────── */

.tooltip-container__bubble {
  /* Позиционирование — над триггером */
  position: absolute;
  bottom: calc(100% + 8px);   /* 8px зазор: хвостик его заполняет */
  left: 50%;
  transform: translateX(-50%);

  /* Форма */
  padding: 4px 12px;
  border-radius: var(--radius-md, 8px);
  white-space: nowrap;

  /* Цвет (фиолетовая гамма проекта) */
  background-color: var(--color-primary-light, #ede9fe);
  color: #5b21b6;

  /* Z-index: уровень тултипа из переменных проекта */
  z-index: var(--z-tooltip, 1070);

  /* Не перехватываем клики */
  pointer-events: none;

  /* Скрыт по умолчанию */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Текст внутри bubble */
.tooltip-container__text {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
}


/* ─────────────────────────────────────────────
   Хвостик (треугольник-стрелка вниз)
   ───────────────────────────────────────────── */

.tooltip-container__bubble::before {
  content: '';
  position: absolute;

  /* Квадрат 0.6em, повёрнутый на 45° → ромб → нижний угол = треугольник */
  width: 0.6em;
  height: 0.6em;
  bottom: -0.25em;       /* выступает за нижний край bubble */
  left: 50%;
  transform: translateX(-50%) rotate(45deg);

  /* Тот же цвет фона, что и bubble — единая фигура */
  background-color: var(--color-primary-light, #ede9fe);
}


/* ─────────────────────────────────────────────
   Активное состояние — показываем bubble
   Класс --active добавляется JS или сервером
   ───────────────────────────────────────────── */

.tooltip-container--active .tooltip-container__bubble {
  opacity: 1;
  visibility: visible;
}



/* ─────────────────────────────────────────────
   Модификаторы цвета
   data-tooltip-theme="dark" / "success" / "warning" / "danger"
   ───────────────────────────────────────────── */

/* Тёмный */
.tooltip-container[data-tooltip-theme="dark"] .tooltip-container__bubble,
.tooltip-container[data-tooltip-theme="dark"] .tooltip-container__bubble::before {
  background-color: #1f2937;
  color: #f9fafb;
}


/* Успех */
.tooltip-container[data-tooltip-theme="success"] .tooltip-container__bubble,
.tooltip-container[data-tooltip-theme="success"] .tooltip-container__bubble::before {
  background-color: var(--color-success-light, #e8f5e9);
  color: #1b5e20;
}


/* Предупреждение */
.tooltip-container[data-tooltip-theme="warning"] .tooltip-container__bubble,
.tooltip-container[data-tooltip-theme="warning"] .tooltip-container__bubble::before {
  background-color: var(--color-warning-light, #fff3e0);
  color: #e65100;
}


/* Ошибка */
.tooltip-container[data-tooltip-theme="danger"] .tooltip-container__bubble,
.tooltip-container[data-tooltip-theme="danger"] .tooltip-container__bubble::before {
  background-color: var(--color-danger-light, #ffebee);
  color: #b71c1c;
}



/* ─────────────────────────────────────────────
   Позиция: снизу (data-tooltip-position="bottom")
   По умолчанию — сверху
   ───────────────────────────────────────────── */

.tooltip-container[data-tooltip-position="bottom"] .tooltip-container__bubble {
  bottom: auto;
  top: calc(100% + 8px);
}

.tooltip-container[data-tooltip-position="bottom"] .tooltip-container__bubble::before {
  bottom: auto;
  top: -0.25em;
  transform: translateX(-50%) rotate(45deg);
}


/* ─────────────────────────────────────────────
   Адаптив — Планшет (≤767px)
   ───────────────────────────────────────────── */

@media (max-width: 767px) {
  .tooltip-container__bubble {
    padding: 3px 8px;
    border-radius: calc(var(--radius-md, 8px) - 1px);
    bottom: calc(100% + 7px);
  }

  .tooltip-container__text {
    font-size: 0.79rem;
  }
}


/* ─────────────────────────────────────────────
   Адаптив — Мобилка (≤575px)
   ───────────────────────────────────────────── */

@media (max-width: 575px) {
  .tooltip-container__bubble {
    padding: 2px 6px;
    border-radius: calc(var(--radius-md, 8px) - 2px);
    bottom: calc(100% + 6px);
  }

  .tooltip-container__text {
    font-size: 0.72rem;
  }
}


/* ─────────────────────────────────────────────
   Доступность: отключить анимацию по настройке ОС
   ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tooltip-container__bubble {
    transition: none;
  }
}