/* =============================================================
 *  Единый стиль всплывающих уведомлений панели hostin.uz
 *
 *  Приводит toastr и iziToast к тому же виду, что у уведомлений в новых
 *  React-компонентах — консоли и файловом менеджере. Значения взяты
 *  напрямую из frontend/src/shared/theme.css, блоки .hz-toasts и .hz-toast,
 *  чтобы совпадало один в один: положение, отступы, размеры, тени.
 *
 *  ВАЖНО: это только оформление. Ни один вызов toastr.success(),
 *  toastr.error(), iziToast.show() не меняется — их в панели больше 190
 *  в 190+ файлах, трогать их незачем и рискованно.
 *
 *  Подключается ПОСЛЕДНИМ в head, после plugins.bundle.css и CDN-стилей
 *  iziToast, иначе не перекроет их собственное оформление.
 * ============================================================= */

:root {
    --hzn-surface: #ffffff;
    --hzn-border: #e4e6ef;
    --hzn-text: #3f4254;
    --hzn-dim: #6c7293;
    /* Цвет глифа-иконки. Отдельным токеном, чтобы в тёмной теме сделать его
       чисто белым: на сером фоне приглушённый серый читался тускло. */
    --hzn-icon: #3f4254;
    --hzn-success: #1bc5bd;
    --hzn-danger: #f64e60;
    --hzn-info: #3699ff;
    --hzn-warning: #ffa800;
    --hzn-radius: 10px;
    --hzn-shadow: 0 4px 10px rgba(24, 28, 50, .08), 0 24px 60px -28px rgba(24, 28, 50, .4);
    --hzn-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.dark-theme {
    --hzn-surface: #242424;
    --hzn-border: #3a3a3a;
    --hzn-text: #ffffff;
    --hzn-dim: #cecece;
    --hzn-icon: #ffffff;
    --hzn-success: #0bb783;
    --hzn-danger: #f64e60;
    --hzn-info: #3699ff;
    --hzn-warning: #ffa800;
    --hzn-shadow: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 60px -30px rgba(0, 0, 0, .9);
}

/* Прозрачность здесь задаётся через filter, а НЕ через opacity, и это
   вынужденно: в стилях панели есть `.toast { opacity: 1 !important; }`,
   а важные объявления сильнее CSS-анимаций — единственный случай, когда
   анимация проигрывает. Через opacity карточка не затухала бы вовсе,
   только сдвигалась. filter: opacity() даёт тот же вид и не заблокирован. */
@keyframes hzn-in {
    from { filter: opacity(0); transform: translateY(8px); }
    to   { filter: opacity(1); transform: translateY(0); }
}

/* Уход — зеркало появления: та же длительность, обратное направление */
@keyframes hzn-out {
    from { filter: opacity(1); transform: translateY(0); }
    to   { filter: opacity(0); transform: translateY(8px); }
}

/* Класс ставит hz-notifications.js в момент скрытия */
#toast-container > div.hzn-hiding {
    animation: hzn-out .22s ease-in forwards !important;
    pointer-events: none;
}

/* =============================================================
 *  Контейнеры: снизу справа, как в редакторе.
 *  Позиция задаётся в JS-вызовах по-разному — toast-top-right,
 *  toast-bottom-right, topRight — поэтому перекрываем все варианты.
 * ============================================================= */

#toast-container,
#toast-container.toast-top-right,
#toast-container.toast-top-left,
#toast-container.toast-top-center,
#toast-container.toast-top-full-width,
#toast-container.toast-bottom-right,
#toast-container.toast-bottom-left,
#toast-container.toast-bottom-center,
#toast-container.toast-bottom-full-width,
.iziToast-wrapper,
.iziToast-wrapper.iziToast-wrapper-topRight,
.iziToast-wrapper.iziToast-wrapper-topLeft,
.iziToast-wrapper.iziToast-wrapper-topCenter,
.iziToast-wrapper.iziToast-wrapper-center,
.iziToast-wrapper.iziToast-wrapper-bottomLeft,
.iziToast-wrapper.iziToast-wrapper-bottomCenter,
.iziToast-wrapper.iziToast-wrapper-bottomRight {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 18px !important;
    bottom: 18px !important;
    /* Ширина задаётся жёстко, а не по содержимому: в эталоне карточки
       одинаковой ширины независимо от длины текста. Без этого контейнер
       сжимался бы под короткое сообщение, и карточки прыгали бы. */
    width: min(380px, calc(100vw - 36px)) !important;
    /* продолжение ниже */
    max-width: min(380px, calc(100vw - 36px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    /* column-reverse, а не column: обе библиотеки вставляют новое уведомление
       в НАЧАЛО списка, а в эталоне новое появляется снизу, у самого угла.
       Разворот колонки даёт тот же порядок без правки JS. */
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 9px;
    z-index: 10600 !important;
    pointer-events: none;
}

/* toastr и iziToast — независимые контейнеры, и оба прибиты к одному углу:
   если уведомления обеих библиотек показываются одновременно, они лягут
   друг на друга. Средствами одного только CSS это не решается — нужна
   высота соседнего контейнера. Её измеряет hz-notifications.js и кладёт
   в переменную ниже, а мы поднимаем стопку iziToast над стопкой toastr. */
.iziToast-wrapper,
.iziToast-wrapper.iziToast-wrapper-topRight,
.iziToast-wrapper.iziToast-wrapper-topLeft,
.iziToast-wrapper.iziToast-wrapper-topCenter,
.iziToast-wrapper.iziToast-wrapper-center,
.iziToast-wrapper.iziToast-wrapper-bottomLeft,
.iziToast-wrapper.iziToast-wrapper-bottomCenter,
.iziToast-wrapper.iziToast-wrapper-bottomRight {
    bottom: calc(18px + var(--hzn-toastr-height, 0px)) !important;
}

/* =============================================================
 *  Карточка уведомления. Значения совпадают с .hz-toast.
 * ============================================================= */

#toast-container > div,
.iziToast {
    position: relative !important;
    /* КРИТИЧНО. У Bootstrap есть свой компонент .toast с `flex-basis: 350px`,
       а карточки toastr имеют ровно этот класс. Пока контейнер был блочным,
       свойство не работало. Как только контейнер стал флексом с вертикальной
       осью, flex-basis превратился в ВЫСОТУ — карточки раздувались до 350px
       каждая и налезали друг на друга. Сбрасываем основу флекса явно. */
    flex: 0 0 auto !important;

    /* Именно 100%, а не auto: iziToast задаёт ширину инлайном под длину
       текста, и короткие уведомления получались уже длинных. В эталоне
       ширина одинаковая у всех. */
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--hzn-surface) !important;
    background-image: none !important;
    border: 1px solid var(--hzn-border) !important;
    border-left: 3px solid var(--hzn-dim) !important;
    border-radius: var(--hzn-radius) !important;
    box-shadow: var(--hzn-shadow) !important;
    color: var(--hzn-text) !important;
    font-family: var(--hzn-font) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: 1;
    pointer-events: auto;
    animation: hzn-in .22s ease-out;
    /* Длинный текст: переносим где угодно, лишь бы не разрывало карточку */
    word-break: break-word;
    overflow-wrap: anywhere;
    float: none !important;
}

#toast-container > div:hover,
.iziToast:hover {
    box-shadow: var(--hzn-shadow) !important;
    opacity: 1;
}

/* =============================================================
 *  toastr: заголовок и текст лежат соседями без общей обёртки,
 *  поэтому раскладка сеткой — иначе они встанут в одну строку.
 *  Первый столбец под иконку, второй тянется, ряды переносятся.
 * ============================================================= */

#toast-container > div {
    /* БЕЗ !important, и это принципиально. При скрытии jQuery ставит элементу
       инлайновый `display: none`, а toastr удаляет узел только если он уже
       не виден — см. проверку `$toastElement.is(':visible')` в toastr.js.
       С !important инлайновый стиль не срабатывал, элемент оставался
       «видимым», и уведомления не исчезали НИКОГДА, копясь на экране.
       Обычного правила достаточно: ни toastr, ни Bootstrap display здесь
       не задают, а специфичности `#toast-container > div` хватает. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    padding: 12px 14px !important;
}

/* Иконка — обычный глиф в цвете текста, как в редакторе, без кружка.
   ВАЖНО: в стилях панели уже есть `.toast::before` с абсолютным
   позиционированием, размером 24x24 и SVG-кружком в фоне. Если не сбросить
   эти свойства поимённо, кружок останется висеть поверх текста, а сетка
   потеряет первый столбец — глиф просто не встанет на место. */
#toast-container > div::before {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700;
    opacity: 1;
    line-height: 1.5 !important;
    color: var(--hzn-icon) !important;
    content: "i";
}

/* Глиф и его цвет зависят от типа уведомления: иконка должна сама говорить,
   что произошло, а не быть одинаково серой во всех случаях. */
#toast-container > .toast-success::before { content: "\2713"; color: var(--hzn-success) !important; }
#toast-container > .toast-error::before   { content: "!";     color: var(--hzn-danger) !important; }
#toast-container > .toast-warning::before { content: "!";     color: var(--hzn-warning) !important; }
#toast-container > .toast-info::before    { content: "i";     color: var(--hzn-info) !important; }

/* Цвет несёт только полоса слева.
   Здесь же обязательно гасим родные иконки-картинки: библиотека задаёт их
   правилом `#toast-container > .toast-success` с !important, и селектор
   `#toast-container > div` его НЕ перебивает — специфичность ниже. Если
   этого не сделать, картинка замостит всю карточку, потому что фон мы
   переопределили и потеряли background-repeat: no-repeat. В светлой теме
   дефект не виден: иконки белые на белом. */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
    background-image: none !important;
    background-repeat: no-repeat !important;
}

#toast-container > .toast-success { border-left-color: var(--hzn-success) !important; }
#toast-container > .toast-error   { border-left-color: var(--hzn-danger) !important; }
#toast-container > .toast-warning { border-left-color: var(--hzn-warning) !important; }
#toast-container > .toast-info    { border-left-color: var(--hzn-info) !important; }

#toast-container > div > .toast-title,
#toast-container > div > .toast-message {
    grid-column: 2;
    min-width: 0;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--hzn-text) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#toast-container > div > .toast-title {
    font-weight: 700 !important;
}

#toast-container > div > .toast-message a,
#toast-container > div > .toast-message label {
    color: var(--hzn-text) !important;
}

/* Кнопки закрытия в редакторе нет: уведомление снимается щелчком.
   У toastr щелчок по карточке закрывает её по умолчанию, так что
   крестик убираем — иначе он ломает совпадение отступов. */
.toast-close-button,
#toast-container > div > .toast-close-button {
    display: none !important;
}

/* Полоски прогресса в редакторе тоже нет */
.toast-progress {
    display: none !important;
}

/* =============================================================
 *  iziToast
 * ============================================================= */

.iziToast > .iziToast-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
    padding: 12px 32px 12px 14px !important;
    margin: 0 !important;
    min-height: 0 !important;
    width: auto !important;
}

/* Место под иконку добавляем ТОЛЬКО когда иконка действительно есть:
   класса-маркера библиотека не ставит, поэтому проверяем сам элемент. */
.iziToast > .iziToast-body:has(> .iziToast-icon) {
    padding-left: 40px !important;
}

.iziToast > .iziToast-body .iziToast-texts {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    float: none !important;
}

.iziToast > .iziToast-body .iziToast-title,
.iziToast > .iziToast-body .iziToast-message {
    display: block !important;
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--hzn-text) !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.iziToast > .iziToast-body .iziToast-title {
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

/* Иконка тем же глифом и в цвете текста */
.iziToast > .iziToast-body .iziToast-icon {
    position: absolute !important;
    top: 12px !important;
    left: 14px !important;
    width: 16px !important;
    height: 20px !important;
    margin: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--hzn-icon) !important;
    font-weight: 700;
    font-size: 13px !important;
    line-height: 20px !important;
    text-align: left;
    opacity: 1;
}

.iziToast > .iziToast-body .iziToast-icon::before {
    content: "i";
}

.iziToast.iziToast-color-green .iziToast-icon::before,
.iziToast.iziToast-color-green .iziToast-icon.ico-success::before { content: "\2713"; }
.iziToast.iziToast-color-red   .iziToast-icon::before { content: "!"; }
.iziToast.iziToast-color-yellow .iziToast-icon::before { content: "!"; }

/* Цвет иконки по типу, как у toastr */
.iziToast.iziToast-color-green  .iziToast-icon { color: var(--hzn-success) !important; }
.iziToast.iziToast-color-red    .iziToast-icon { color: var(--hzn-danger) !important; }
.iziToast.iziToast-color-blue   .iziToast-icon { color: var(--hzn-info) !important; }
.iziToast.iziToast-color-yellow .iziToast-icon { color: var(--hzn-warning) !important; }

.iziToast.iziToast-color-green  { border-left-color: var(--hzn-success) !important; }
.iziToast.iziToast-color-red    { border-left-color: var(--hzn-danger) !important; }
.iziToast.iziToast-color-blue   { border-left-color: var(--hzn-info) !important; }
.iziToast.iziToast-color-yellow { border-left-color: var(--hzn-warning) !important; }

/* Тёмная тема: фон задаётся классом темы библиотеки. Границы задаём
   по трём сторонам поимённо — сокращение border-color перебило бы
   цветную полосу слева, и она стала бы серой. */
body.dark-theme .iziToast.iziToast-theme-light,
body.dark-theme .iziToast.iziToast-theme-dark {
    background: var(--hzn-surface) !important;
    border-top-color: var(--hzn-border) !important;
    border-right-color: var(--hzn-border) !important;
    border-bottom-color: var(--hzn-border) !important;
}

/* Крестик у iziToast оставляем: в отличие от toastr, щелчок по карточке
   её не закрывает, и без крестика длинные уведомления пришлось бы
   пережидать. Делаем его незаметным, места почти не занимает. */
.iziToast > .iziToast-close {
    position: absolute !important;
    top: 9px !important;
    right: 10px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    background: none !important;
    filter: none !important;
    opacity: .55;
}

.iziToast > .iziToast-close::before {
    content: "\00D7";
    display: block;
    color: var(--hzn-text);
    font-size: 15px;
    line-height: 16px;
    text-align: center;
}

.iziToast > .iziToast-close:hover {
    opacity: 1;
}

.iziToast > .iziToast-progressbar {
    display: none !important;
}

/* =============================================================
 *  Мобильные
 * ============================================================= */

@media (max-width: 640px) {
    #toast-container,
    .iziToast-wrapper {
        right: 12px !important;
        bottom: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    #toast-container > div,
    .iziToast {
        font-size: 12.5px !important;
    }

    #toast-container > div > .toast-title,
    #toast-container > div > .toast-message,
    .iziToast > .iziToast-body .iziToast-title,
    .iziToast > .iziToast-body .iziToast-message {
        font-size: 12.5px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div,
    .iziToast {
        animation-duration: .01ms !important;
    }
}