/* =========================================================
       ОКОШКО ПРЕДМЕТА ПРИ НАВЕДЕНИИ

       Общий файл: окошко показывается и в AdminCP на странице
       выдачи предметов, и на публичной странице персонажа.
       Разметка — Views/Shared/_ItemTooltip.cshtml,
       показ — wwwroot/js/item-tooltip.js.

       Всё по центру, как в клиенте, а цвета несут смысл: значения
       голубые, Excellent зелёный, сет золотой, классы приглушённые.
       Оттенки сняты по пикселям скриншота игры, не подобраны на глаз.

       Переменные --mu-* здесь не используются намеренно: файл
       подключается и к публичной части, и к AdminCP, а цвета окошка
       должны совпадать с игрой в обоих случаях.
       ========================================================= */

    .item-tooltip {
        position: absolute;
        z-index: 60;

        /* Ширина — по самой длинной строке, а не жёсткие 320 px.
           У сокетных предметов строки длинные:
           `Socket 4: [Level 20]Water(Shield protection increase +1100%)` —
           при фиксированной ширине хвост с процентом уезжал на вторую
           строку. Тянется до предела, дальше уже переносится. */
        width: max-content;
        max-width: min(92vw, 560px);
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 4px;
        background: rgba(10, 10, 14, 0.96);
        color: #e6e6ea;
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
        pointer-events: none;
        display: flex;
        flex-direction: column;
    }

    /* display: flex перебил бы атрибут hidden, поэтому гасим явно. */
    .item-tooltip[hidden] {
        display: none;
    }

    .item-tooltip__title {
        margin-bottom: 5px;
        color: #ffd76e;
        font-size: 12px;
    }

    /* Название в клиенте ярко-зелёное у Excellent и Ancient —
       у обычного предмета золотое. */
    .item-tooltip__title--green {
        color: #19fb7d;
    }

    /* Название пентаграма в клиенте белое (снято со снимка
       `Antonia's Sword` 17.10.2026). */
    .item-tooltip__title--white {
        color: #f3f3f3;
    }

    /* Название сокетного предмета — сиренево-фиолетовое. Снято со снимка
       13.10.2026 (Lazy Wind Gloves): плато #AD63F8. Не путать с цветом
       заголовка блока сокетов — там маджента #F918F9, это в клиенте
       два разных цвета (замерено в одном и том же снимке). */
    .item-tooltip__title--socket {
        color: #ad63f8;
    }

    /* Строка сета — там же, где название, зелёная. */
    .item-tooltip__line--set {
        color: #7ee07e;
    }

    /* =========================================================
       СЕРЬГИ — своя палитра
       Снято по плато с игрового снимка 16.10.2026
       (Earring of Wrath [Left]). У серёг цвета другие, чем у всего
       остального окошка, и путать их нельзя:
         название и строки сета — #00FB00 (чистый зелёный),
         поля (прочность, урон, защита, уровень) — БЕЛЫЕ #FBFBFB,
         опции — тот же голубой #74A2E8, что везде,
         заголовок сета — насыщенное золото #FBC919.
       ========================================================= */

    .item-tooltip__title--earring {
        color: #00fb00;
    }

    .item-tooltip__line--earringfield {
        color: #fbfbfb;
    }

    .item-tooltip__line--earringsetheader {
        color: #fbc919;
    }

    .item-tooltip__line--earringset {
        color: #00fb00;
    }

    /* В клиенте ВСЁ, кроме названия, голубое — и характеристики,
       и Luck, и дополнительные, и строки Excellent. Проверено
       по пикселям: у всех этих строк один и тот же оттенок. */
    .item-tooltip__line--value,
    .item-tooltip__line--excellent {
        color: #74a2e8;
    }

    /* Пентаграм — палитра снята по пикселям со снимка `Antonia's Sword`
       17.10.2026: белый текст `#F3F3F3`, золотые строки `#FBC919`,
       серые требования `#BBBBBB`, синие гнёзда `#7DAFFB`. */
    .item-tooltip__line--white {
        color: #f3f3f3;
    }

    .item-tooltip__line--gold {
        color: #fbc919;
    }

    .item-tooltip__line--requirement {
        color: #bbbbbb;
    }

    .item-tooltip__line--slot {
        color: #7daffb;
    }

    /* Guardian-предметы (снимок Taurus [Rare] 17.10.2026): название
       [Rare] и строки сопротивлений фиолетовые, требование уровня —
       красное (клиент красит его так, когда уровень персонажа ниже). */
    .item-tooltip__title--guardianrare {
        color: #ad63f8;
    }

    .item-tooltip__line--guardianrequirement {
        color: #fb3219;
    }

    .item-tooltip__line--guardianresistance {
        color: #ad63f8;
    }

    /* Пустая строка-разделитель: в клиенте блок Excellent отделён
       от дополнительной опции. */
    .item-tooltip__line--gap {
        height: 7px;
    }

    /* Пустая строка во всю высоту строки — в клиенте так отделены блоки
       сокетов: шаг строк у него 18 px, а вокруг заголовка 36 px, то есть
       ровно одна пустая строка. Высота взята от line-height окошка (1.5),
       чтобы совпадать со строкой текста, а не подбираться на глаз. */
    .item-tooltip__line--blank {
        height: 1.5em;
    }

    /* Заголовки блоков сокетов — «Socket Item option info» и «Bonus socket
       option». В клиенте набраны маджентой; цвет снят по пикселям снимка
       13.10.2026: у второго заголовка ровное плато #FB19FB, у первого
       максимум #FA19FA — тот же цвет, просто меньше полных пикселей. */
    .item-tooltip__line--socketheader {
        color: #fb19fb;
    }

    /* Элемент пентаграма и эрртеля. Клиент пишет его сразу под названием,
       своим цветом у каждой стихии. Цвета сняты по пикселям снимков
       17.10.2026: Fire, Earth, Darkness. Water и Wind ещё не видели —
       у них нейтральный голубой, как у обычных опций. */
    .item-tooltip__line--element1 {
        color: #fb3219;                     /* Fire */
    }

    .item-tooltip__line--element2 {
        color: #74a2e8;                     /* Water — не проверено */
    }

    .item-tooltip__line--element3 {
        color: #fbc919;                     /* Earth */
    }

    .item-tooltip__line--element4 {
        color: #00fb00;                     /* Wind — замерено 17.10.2026 */
    }

    .item-tooltip__line--element5 {
        color: #7e007e;                     /* Darkness */
    }

    /* Пустое гнездо — «No item application». В клиенте эта строка заметно
       тусклее голубых строк с опциями: снято со снимка 14.10.2026, плато
       #555555 и самый яркий пиксель #646464 на всех пяти строках. */
    .item-tooltip__line--socketempty {
        color: #646464;
    }

    /* Mastery Bonus Option — в клиенте подписан сиреневым. */
    .item-tooltip__line--mastery {
        margin-top: 5px;
        color: #cf7de0;
    }

    /* Правая колонка игры — бонусы сета. Заголовок золотой, как
       «Set Item Equipment Information», сами эффекты зелёные. */
    .item-tooltip__line--setheader {
        margin-top: 5px;
        color: #ffd76e;
    }

    .item-tooltip__line--muted {
        color: #8b8b96;
    }