/* ─────────────────────────────────────────────────────
   Уведомления (ui-guide §5): inline-уведомление в потоке страницы,
   сводка ошибок формы — тот же блок (ADR-0070, ADR-0031); всплывающее
   уведомление внизу справа (ADR-0071); системный баннер о состоянии
   аккаунта в шапке.
   Подключается в base.html после globals.css.

   Тип сообщения передают значок, фон и рамка, а не цвет текста: текст —
   основного цвета (WCAG 1.4.1, 1.4.3; Carbon, Notification; Atlassian,
   Section message). Своих цветов текста --*-text у абзацев нет.
───────────────────────────────────────────────────── */

/* ── Значок состояния (includes/status_icon.html) ──
   16×16, линия 2, цвет --*-text своего тона; aria-hidden, а слово
   состояния рядом — скрытым текстом (ui-guide §18). */
.status-icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.status-icon--success { color: var(--success-text); }
.status-icon--warning { color: var(--warning-text); }
.status-icon--error   { color: var(--error-text); }
.status-icon--info    { color: var(--info-text); }

/* ── Inline-уведомление ──
   Не сворачивается и не закрывается: исчезает само, когда проблема решена
   (ADR-0070). Отступ снизу — тот же, что был у страничных копий; в колонке
   с gap (страница-форма, карточка документа) его снимает раскладка. */
.alert {
    margin: 0 0 14px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 20px;
    color: var(--text-secondary);
}

.alert:last-child {
    margin-bottom: 0;
}

.alert-success { background: var(--success-bg); border-color: var(--success-border); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.alert-error   { background: var(--error-bg);   border-color: var(--error-border); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border); }

/* Строка заголовка: значок, скрытое слово, заголовок. Без заголовка в ней
   же стоит текст — значок в одну строку с ним. Действие к одному сообщению
   (без списка) — у правого края этой строки (Carbon, Notification). */
.alert-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.alert-head .status-icon {
    margin-top: 2px;
}

.alert-head > .alert-body {
    flex: 1;
    min-width: 0;
}

.alert-head > .alert-action,
.alert-head > .alert-action-form {
    margin-left: auto;
}

/* Действие POST-ом: форма — обёртка кнопки .alert-action */
.alert-action-form {
    flex: none;
    margin: 0;
}

.alert-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 20px;
    color: var(--text);
}

.alert-body {
    margin: 0;
}

/* Несколько абзацев одного сообщения (ошибки формы без заголовка) и
   абзацы, которые JS кладёт прямо в блок, — без полей браузера */
.alert-body > p,
.alert > p {
    margin: 0;
}

.alert-body > p + p,
.alert > p + p {
    margin-top: 4px;
}

/* Ссылка в тексте (на поле формы, в другой раздел) — --primary и
   подчёркивание: от текста рядом её отличает не только цвет (WCAG 1.4.1) */
.alert-body a:not([class]),
.alert-item-text a:not([class]) {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alert-body a:not([class]):hover,
.alert-item-text a:not([class]):hover {
    color: var(--primary-hover);
}

/* Текст под заголовком — с отступом под значок: 16 + 8 */
.alert-head ~ .alert-body,
.alert-head ~ .alert-list {
    margin-top: 4px;
    padding-left: 24px;
}

/* Пункты: один пункт — один вид проблемы с действием справа.
   Разделителей нет — промежуток 12px (Material 3, Dividers). */
.alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-head ~ .alert-list {
    margin-top: 8px;
}

.alert-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.alert-item-text {
    min-width: 0;
}

/* Вторичная строка пункта — часть пункта, как .cell-sub в таблице:
   основание удержания, подсказка к действию (ui-guide §5). */
.alert-item-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Действие — как .row-action--label (ADR-0068): без рамки и фона, 12/600
   --primary, при наведении подложка. Отрицательные поля держат текст
   действия по краю пункта, а подложку — за его пределами. Ссылка-переход
   в другой раздел — тот же вид. */
.alert-action {
    flex: none;
    margin: -4px -8px -4px 0;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 20px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.alert-action:hover {
    background: var(--hover-active);
    color: var(--primary-hover);
}

/* ── Всплывающее уведомление (ADR-0071) ──
   Внизу справа: сверху справа — основные действия страницы. Стек до трёх,
   новое сверху (column-reverse: последний в разметке — верхний), зазор 8px.
   Сообщает только, что произошло; success/info исчезают сами, error и
   warning ждут крестика (toast.js). */
.toast-region {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-toast);
    width: 400px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.toast {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 44px 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    font-size: var(--text-sm);
    line-height: 20px;
    color: var(--text);
    pointer-events: auto;
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-success { border-left-color: var(--success-text); }
.toast-info    { border-left-color: var(--info-text); }
.toast-warning { border-left-color: var(--warning-text); }
.toast-error   { border-left-color: var(--error-text); }

.toast.is-leaving {
    opacity: 0;
    transform: translateX(8px);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.toast-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.toast-body .status-icon {
    margin-top: 2px;
}

.toast-text {
    margin: 0;
    min-width: 0;
}

/* Не больше двух строк (Carbon, Notification) — только у исчезающих:
   error/warning висят до крестика и показываются целиком (решение
   владельца 27.09.2026, ADR-0071) */
.toast-success .toast-text,
.toast-info .toast-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Действия — строкой ниже текста, под ним же (отступ под значок) */
.toast-actions {
    display: flex;
    gap: 8px;
    padding-left: 24px;
}

.toast-actions form {
    display: contents;
}

.toast-action {
    margin: -4px -8px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 20px;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.toast-action:hover {
    background: var(--hover-active);
    color: var(--primary-hover);
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.toast-close:hover {
    background: var(--hover);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        animation: none;
        transition: none;
    }
}

/* ── Системный баннер: состояние аккаунта, а не страницы ──
   Подписка не оплачена или тариф приостановлен — полоса в шапке на любой
   странице (GOV.UK, Notification banner; Atlassian, Banner). Правила
   уведомлений общие: значок состояния и скрытое слово, текст --text,
   действие — белая кнопка tms-btn-light (ADR-0068). */
.billing-alert-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--error-bg);
    border-bottom: 1px solid var(--error-border);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.billing-alert-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Вход от имени пользователя (служебная панель) — баннер тех же правил,
   тон warning: состояние сессии, а не ошибка (решение владельца
   29.09.2026; GOV.UK, Notification banner). */
.impersonate-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 6px 16px;
    background: var(--warning-bg);
    border-bottom: 1px solid var(--warning-border);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
    flex-shrink: 0;
}

.impersonate-bar-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

.impersonate-bar form {
    margin: 0;
}