/*
 * flash.css
 * Страница: все
 * Блок: всплывающие сообщения системы (обёртка `[data-flash]`)
 *
 * Сообщение об итоге действия — «вернули 5 записей», «не вышло
 * вернуть склад: место занято». Всплывает в правом верхнем углу
 * и не двигает содержимое страницы.
 *
 * Раньше сообщение вставало обычным блоком над содержимым: страница
 * подпрыгивала, а само оно оказывалось выше того места, куда человек
 * смотрел, — нажал кнопку внизу длинного списка и не увидел ответа
 * вовсе.
 *
 * **Правило только для этой обёртки, а не для всех `.alert`.** Такие
 * блоки стоят и внутри страниц — объяснение в карточке, предупреждение
 * в форме. Они должны оставаться на своих местах: подними их наверх
 * общим правилом, и они полезут поверх всего подряд.
 *
 * Что внутри:
 * 1. Угол: где висит стопка сообщений
 * 2. Само сообщение
 */

/* --- 1. Угол --- */

/*
 * Правый верхний угол страницы, не дальше 20 точек от края (задача
 * №90, слово Александра): раньше верх отсчитывался от шапки кабинета
 * (4.25rem), чтобы сообщение её не перекрывало, — теперь оно и не
 * должно прятаться под шапку, ему велено висеть именно в углу
 * страницы, поверх всего, включая окна документов.
 *
 * `z-index` выше самого высокого окна: `windows.js` считает свой
 * счётчик `topZIndex` от 100010 и растит на единицу с каждым новым
 * или поднятым окном — сообщение обязано быть виднее в любом случае,
 * иначе отказ при сохранении документа в открытом окне (задача №79)
 * лёг бы за него и остался незамеченным.
 */
[data-flash] {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000000;

    display: flex;
    flex-direction: column;

    /*
     * Сообщения жмутся к правому краю и растягиваются по своему
     * тексту, а не по обёртке. Иначе «Вернули записей: 40» занимало
     * коробку в треть экрана — текст в одну строку, а вокруг него
     * пустое поле.
     */
    align-items: flex-end;
    gap: .5rem;

    /* Предел на случай длинного перечня; короткое будет уже. */
    max-width: min(26rem, calc(100vw - 2rem));

    /*
     * Нажатия проходят сквозь пустую обёртку: она занимает угол
     * целиком, и без этого перекрывала бы то, что под ней, даже
     * когда сообщений нет.
     */
    pointer-events: none;
}

/* --- 2. Сообщение --- */

[data-flash] .alert {
    /* А само сообщение нажимается: у него есть крестик. */
    pointer-events: auto;

    margin-bottom: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);

    /*
     * Отступы свои, поменьше обычных: у Bootstrap блок сообщения
     * рассчитан на объявление во всю ширину страницы, а у нас
     * это короткая всплывающая строка.
     */
    padding: .6rem .85rem;

    /*
     * Длинный перечень (несколько причин отказа подряд) иначе рос
     * вниз без остановки и уезжал за нижний край страницы — конец
     * списка было не прочитать не промотав саму страницу (задача
     * №90). Потолок в 40% высоты экрана и своя прокрутка внутри —
     * сообщение остаётся видно целиком, а не только его начало.
     */
    max-height: 40vh;
    overflow-y: auto;

    /*
     * `white-space: pre-line` здесь стоять не должно, и это стоило
     * половины вечера 01.09.2026.
     *
     * Ставили ради перечня причин, который приходит строками. А Yii
     * выводит разметку с переносами — после открывающего тега
     * и перед крестиком. В обычном тексте они невидимы, но `pre-line`
     * превращает каждый в настоящую пустую строку: сообщение в две
     * строки занимало пять, и плашка выходила втрое выше нужного.
     *
     * Сбивало с толку то, что отступы при этом были правильные,
     * и в разборе стилей всё выглядело верным.
     *
     * Перенос строки в перечне делает тот, кто его составляет, —
     * тегом `<br>`, а не свойством на всю плашку.
     */
}

/*
 * Место под крестик — ровно столько, сколько он занимает.
 *
 * Bootstrap отводит ему три четверти дюйма справа: у него сообщение
 * во всю ширину, там это незаметно. У короткой строки такой запас
 * оказывается шире самого текста.
 */
[data-flash] .alert-dismissible {
    padding-right: 2.25rem;
}

[data-flash] .alert-dismissible .btn-close {
    padding: .55rem;
}

/*
 * Появление сверху вниз: сообщение выезжает из-под шапки.
 *
 * Тем, кто просил не двигать картинку, движения не показываем.
 */
@media (prefers-reduced-motion: no-preference) {
    [data-flash] .alert {
        animation: flash-in .18s ease-out;
    }
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}