/*
 * Soft-стиль встроенных flash-уведомлений October в духе Tabler «dismissable alerts».
 *
 * Ядро рисует тосты `.jax-flash-message` ярким СПЛОШНЫМ фоном и белым текстом
 * (см. FlashMessage.defaultCSS в modules/system/assets/js/framework-bundle.js).
 * Свой <style> ядро инжектит JS-ом в САМОЕ НАЧАЛО <head>
 * (installStylesheetElement → head.insertBefore(.., head.firstChild)), а этот файл
 * подключается позже через backend.page.beforeDisplay в Gasavt\App\Plugin::boot,
 * поэтому при равной специфичности перебивает дефолт без !important.
 *
 * Формула soft-заливки взята 1:1 из @tabler/core (scss/ui/_alerts.scss):
 *   text   = <color>                                              (--tblr-alert-color)
 *   bg     = color-mix(srgb, color-mix(srgb, <color> 10%, transparent), <surface>)
 *   border = color-mix(srgb, <color> 20%, transparent)
 * Палитра — Tabler theme-colors (значения из собранного themes/gasavt theme.css):
 *   success #2fb344 · danger #d63939 · warning #f59f00 · info #4299e1
 * Surface — Tabler --tblr-bg-surface: #fff (light) / #1f2937 = gray-800 (dark).
 */

.jax-flash-message {
    /* фон, с которым смешивается tint (Tabler --tblr-bg-surface) */
    --ga-flash-surface: #ffffff;
    /* цвет варианта; info — значение по умолчанию */
    --ga-flash-color: #4299e1;
    /* цвет ТЕКСТА = Tabler --tblr-body-color (нейтральный), а НЕ цвет варианта:
       у Tabler цветными в soft-alert остаются только иконка, граница и фон-tint */
    --ga-flash-text: #1f2937;

    color: var(--ga-flash-text);
    border: 1px solid color-mix(in srgb, var(--ga-flash-color) 20%, transparent);
    border-radius: 0.5rem; /* Tabler --tblr-border-radius */
    padding: 0.75rem 1rem; /* Tabler --tblr-alert-padding-y / -x */
    /* display:flex/gap дублируют дефолт ядра — чтобы иконка-::before и крестик
       раскладывались как flex-айтемы даже без ядрового <style> */
    display: flex;
    gap: 0.75rem;
    align-items: center;
    /* Матовое стекло: soft-фон по формуле Tabler полупрозрачен (итоговая alpha ~0.55),
       поэтому без размытия сквозь него «просвечивает» контент страницы. backdrop-filter
       размывает и подкрашивает задний план → frosted glass; saturate оживляет цвета. */
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
            backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

/* Текст занимает всё свободное место → крестик всегда прижат к правому краю.
   Дублирует ядровое `.flash-message{flex-grow:1}`, но работает и без ядрового
   <style>, и при контейнере, ужатом по контенту. */
.jax-flash-message .flash-message { flex: 1 1 auto; }

/* Маппинг типов October → палитра Tabler */
.jax-flash-message.success { --ga-flash-color: #2fb344; }
.jax-flash-message.error   { --ga-flash-color: #d63939; }
.jax-flash-message.warning { --ga-flash-color: #f59f00; }
.jax-flash-message.info,
.jax-flash-message.loading { --ga-flash-color: #4299e1; }

/* Soft-заливку задаём на уровне ВАРИАНТА (специфичность 0,2,0), а не базового
   класса: ядро красит фон правилом `.jax-flash-message.success{background:#86cb43}`
   той же специфичности, и при одинарном `.jax-flash-message` (0,1,0) победило бы
   оно. При равной специфичности выигрывает наш файл — он подключён позже. */
.jax-flash-message.success,
.jax-flash-message.error,
.jax-flash-message.warning,
.jax-flash-message.info,
.jax-flash-message.loading {
    background: color-mix(in srgb, color-mix(in srgb, var(--ga-flash-color) 10%, transparent), var(--ga-flash-surface));
}

/* Иконка слева — outline-иконки @tabler/icons 1:1 (тот же набор, что Tabler ставит
   в .alert-icon): success=circle-check, error=alert-circle, warning=alert-triangle,
   info=info-circle. Рисуем CSS-маской (stroke→%23000 для непрозрачного силуэта),
   заливка currentColor → иконка в цвете варианта. */
.jax-flash-message::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    /* иконка — в ЦВЕТЕ варианта (Tabler .alert-icon: color: var(--tblr-alert-color)) */
    background-color: var(--ga-flash-color);
    -webkit-mask: var(--ga-flash-icon) center / contain no-repeat;
            mask: var(--ga-flash-icon) center / contain no-repeat;
}
.jax-flash-message.success {
    --ga-flash-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0'/%3e%3cpath d='M9 12l2 2l4 -4'/%3e%3c/svg%3e");
}
.jax-flash-message.error {
    --ga-flash-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3e%3cpath d='M12 8v4'/%3e%3cpath d='M12 16h.01'/%3e%3c/svg%3e");
}
.jax-flash-message.warning {
    --ga-flash-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 9v4'/%3e%3cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0'/%3e%3cpath d='M12 16h.01'/%3e%3c/svg%3e");
}
.jax-flash-message.info {
    --ga-flash-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3e%3cpath d='M12 9h.01'/%3e%3cpath d='M11 12h1v4h1'/%3e%3c/svg%3e");
}
/* у loading-тоста роль иконки играет встроенный спиннер .flash-loader */
.jax-flash-message.loading::before { display: none; }

/* Крестик закрытия — outline-иконка @tabler/icons `x` 1:1, приглушённая, в тон текста.
   `background: currentColor` сбрасывает белый SVG ядра (background-image → none),
   а маска вырезает крестик. */
.jax-flash-message a.flash-close {
    /* геометрия дублирует дефолт ядра — крестик-маска не схлопывается без него */
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em;
    margin-left: auto; /* подстраховка: толкает крестик вправо и без flex-grow текста */
    cursor: pointer;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6l-12 12'/%3e%3cpath d='M6 6l12 12'/%3e%3c/svg%3e") center / 1em auto no-repeat;
            mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6l-12 12'/%3e%3cpath d='M6 6l12 12'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    opacity: .4;
}
.jax-flash-message a.flash-close:hover,
.jax-flash-message a.flash-close:focus {
    opacity: .85;
}

/* Тёмная тема backend (Bootstrap 5: [data-bs-theme="dark"]).
   Меняем только surface — формула tint и палитра остаются теми же, как у Tabler. */
[data-bs-theme="dark"] .jax-flash-message {
    --ga-flash-surface: #1f2937; /* Tabler --tblr-bg-surface (dark) = gray-800 */
    --ga-flash-text: #e5e7eb;    /* Tabler --tblr-body-color (dark) = gray-200 */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
}
