/* ==========================================================================
   Общий тултип сайта. Разметку и положение считает tooltip.js.

   Пузырь лежит в конце <body> и позиционируется абсолютно от страницы, а не
   от элемента: так его не обрезают контейнеры с overflow, которых на сайте
   много (таблицы, карточки, боковая панель).
   ========================================================================== */

.moor-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40000;            /* выше модалок (10000) и лайтбоксов (20000) */
    max-width: 320px;
    padding: 7px 10px;
    border: 1px solid var(--border-hover);
    border-radius: 5px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
    white-space: pre-line;     /* переносы строк в подсказке сохраняем */
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);

    /* Курсор не должен «наезжать» на собственную подсказку: иначе элемент
       считается покинутым, тултип прячется, курсор возвращается — и так по
       кругу, подсказка мигает. */
    pointer-events: none;

    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
}

.moor-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------- стрелка

   Стрелка ставится по --arrow-x / --arrow-y, которые считает скрипт. Это
   нужно из-за поджатия к краю окна: пузырь у края смещается, а стрелка должна
   остаться на элементе, иначе непонятно, к чему подсказка относится. */

.moor-tooltip::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-hover);
    transform: rotate(45deg);
}

/* Стрелка — квадрат, повёрнутый на 45°. Две его стороны прячем под пузырь,
   чтобы рамка не пересекала тело подсказки. */
.moor-tooltip[data-side="bottom"]::after {
    top: -5px;
    left: var(--arrow-x, 50%);
    margin-left: -4px;
    border-right: 0;
    border-bottom: 0;
}

.moor-tooltip[data-side="top"]::after {
    bottom: -5px;
    left: var(--arrow-x, 50%);
    margin-left: -4px;
    border-left: 0;
    border-top: 0;
}

.moor-tooltip[data-side="right"]::after {
    left: -5px;
    top: var(--arrow-y, 50%);
    margin-top: -4px;
    border-right: 0;
    border-top: 0;
}

.moor-tooltip[data-side="left"]::after {
    right: -5px;
    top: var(--arrow-y, 50%);
    margin-top: -4px;
    border-left: 0;
    border-bottom: 0;
}

/* Направление «выезда» под сторону: подсказка появляется как бы от элемента. */
.moor-tooltip[data-side="top"]    { transform: translateY(2px);  }
.moor-tooltip[data-side="left"]   { transform: translateX(2px);  }
.moor-tooltip[data-side="right"]  { transform: translateX(-2px); }

.moor-tooltip[data-side="top"].is-visible,
.moor-tooltip[data-side="left"].is-visible,
.moor-tooltip[data-side="right"].is-visible {
    transform: none;
}

/* Экран без наведения (телефон, планшет): подсказка там не показывается —
   показать её нечем. Прячем совсем, чтобы случайный tap не оставил пузырь
   висеть посреди страницы. */
@media (hover: none) {
    .moor-tooltip { display: none; }
}