/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / ALERTS

   Responsabilidades:
   - mensagens de sucesso, erro, aviso e informação;
   - alertas com título, texto, ícone e ações;
   - mensagens do Django;
   - estados compacto, amplo, outline e destaque lateral;
   - alertas descartáveis;
   - agrupamento de mensagens.

   Não inclui:
   - toast flutuante;
   - central de notificações;
   - banners específicos de páginas;
   - comportamento JavaScript;
   - botões próprios.

   Dependências:
   - tokens.css;
   - components/buttons.css.
   ========================================================== */


/* ==========================================================
   ALERTA BASE

   Variáveis internas permitem alterar aparência, tamanho
   e estado sem repetir a estrutura principal.
   ========================================================== */

   .ayw-alert {
    --ayw-alert-gap: var(--ayw-space-3);

    --ayw-alert-padding-y: var(--ayw-space-4);
    --ayw-alert-padding-x: var(--ayw-space-4);

    --ayw-alert-border-width: 1px;
    --ayw-alert-border-color: var(--ayw-border);

    --ayw-alert-radius: var(--ayw-radius-md);

    --ayw-alert-bg: var(--ayw-surface);
    --ayw-alert-color: var(--ayw-text-soft);
    --ayw-alert-title-color: var(--ayw-text);
    --ayw-alert-icon-color: currentColor;

    --ayw-alert-shadow: var(--ayw-shadow-xs);

    --ayw-alert-icon-size: 24px;
    --ayw-alert-icon-font-size: 1rem;

    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-alert-gap);

    padding:
        var(--ayw-alert-padding-y)
        var(--ayw-alert-padding-x);

    border:
        var(--ayw-alert-border-width)
        solid
        var(--ayw-alert-border-color);

    border-radius: var(--ayw-alert-radius);

    background: var(--ayw-alert-bg);
    color: var(--ayw-alert-color);

    box-shadow: var(--ayw-alert-shadow);
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.ayw-alert-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: var(--ayw-alert-icon-size);
    height: var(--ayw-alert-icon-size);

    margin-top: 1px;

    color: var(--ayw-alert-icon-color);

    font-size: var(--ayw-alert-icon-font-size);
    line-height: 1;
}

.ayw-alert-icon svg,
.ayw-alert-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-alert-icon img {
    object-fit: contain;
}


/* ==========================================================
   CONTEÚDO
   ========================================================== */

.ayw-alert-content {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-alert-title {
    margin: 0;

    color: var(--ayw-alert-title-color);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-normal);

    overflow-wrap: anywhere;
}

.ayw-alert-text {
    margin:
        var(--ayw-space-1)
        0
        0;

    color: inherit;

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);

    overflow-wrap: anywhere;
}

.ayw-alert-text:first-child {
    margin-top: 0;
}

.ayw-alert-text p {
    margin: 0;
}

.ayw-alert-text p + p {
    margin-top: var(--ayw-space-2);
}

.ayw-alert-text a {
    color: inherit;

    font-weight: var(--ayw-font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.ayw-alert-text a:hover {
    text-decoration-thickness: 2px;
}


/* ==========================================================
   AÇÕES

   Os botões pertencem a buttons.css.
   ========================================================== */

.ayw-alert-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-2);

    margin-top: var(--ayw-space-3);
}

.ayw-alert-actions.is-end {
    justify-content: flex-end;
}

.ayw-alert-actions.is-between {
    justify-content: space-between;
}


/* ==========================================================
   VARIANTE NEUTRA
   ========================================================== */

.ayw-alert-neutral {
    --ayw-alert-border-color: var(--ayw-border);
    --ayw-alert-bg: var(--ayw-bg-soft);
    --ayw-alert-color: var(--ayw-text-soft);
    --ayw-alert-title-color: var(--ayw-text);
    --ayw-alert-icon-color: var(--ayw-text-muted);
}


/* ==========================================================
   VARIANTE PRIMÁRIA
   ========================================================== */

.ayw-alert-primary {
    --ayw-alert-border-color: var(--ayw-primary-border);
    --ayw-alert-bg: var(--ayw-primary-soft);
    --ayw-alert-color: var(--ayw-primary);
    --ayw-alert-title-color: var(--ayw-primary);
    --ayw-alert-icon-color: var(--ayw-primary);
}


/* ==========================================================
   VARIANTE SUCESSO
   ========================================================== */

.ayw-alert-success {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-success) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-success-soft);
    --ayw-alert-color: var(--ayw-success);
    --ayw-alert-title-color: var(--ayw-success);
    --ayw-alert-icon-color: var(--ayw-success);
}


/* ==========================================================
   VARIANTE ERRO
   ========================================================== */

.ayw-alert-danger,
.ayw-alert-error {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-danger) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-danger-soft);
    --ayw-alert-color: var(--ayw-danger);
    --ayw-alert-title-color: var(--ayw-danger);
    --ayw-alert-icon-color: var(--ayw-danger);
}


/* ==========================================================
   VARIANTE AVISO
   ========================================================== */

.ayw-alert-warning {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-warning) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-warning-soft);
    --ayw-alert-color: var(--ayw-warning);
    --ayw-alert-title-color: var(--ayw-warning);
    --ayw-alert-icon-color: var(--ayw-warning);
}


/* ==========================================================
   VARIANTE INFORMAÇÃO
   ========================================================== */

.ayw-alert-info {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-info) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-info-soft);
    --ayw-alert-color: var(--ayw-info);
    --ayw-alert-title-color: var(--ayw-info);
    --ayw-alert-icon-color: var(--ayw-info);
}


/* ==========================================================
   DESTAQUE LATERAL
   ========================================================== */

.ayw-alert-accent {
    border-left-width: 4px;
}

.ayw-alert-accent.ayw-alert-primary {
    border-left-color: var(--ayw-primary);
}

.ayw-alert-accent.ayw-alert-success {
    border-left-color: var(--ayw-success);
}

.ayw-alert-accent.ayw-alert-danger,
.ayw-alert-accent.ayw-alert-error {
    border-left-color: var(--ayw-danger);
}

.ayw-alert-accent.ayw-alert-warning {
    border-left-color: var(--ayw-warning);
}

.ayw-alert-accent.ayw-alert-info {
    border-left-color: var(--ayw-info);
}

.ayw-alert-accent.ayw-alert-neutral {
    border-left-color: var(--ayw-text-muted);
}


/* ==========================================================
   OUTLINE
   ========================================================== */

.ayw-alert-outline {
    --ayw-alert-bg: transparent;
    --ayw-alert-shadow: none;
}


/* ==========================================================
   VARIANTE SÓLIDA

   Deve ser usada apenas quando o alerta precisar de maior
   destaque visual.
   ========================================================== */

.ayw-alert-solid {
    --ayw-alert-color: #ffffff;
    --ayw-alert-title-color: #ffffff;
    --ayw-alert-icon-color: #ffffff;
}

.ayw-alert-solid.ayw-alert-primary {
    --ayw-alert-border-color: var(--ayw-primary);
    --ayw-alert-bg: var(--ayw-primary);
}

.ayw-alert-solid.ayw-alert-success {
    --ayw-alert-border-color: var(--ayw-success);
    --ayw-alert-bg: var(--ayw-success);
}

.ayw-alert-solid.ayw-alert-danger,
.ayw-alert-solid.ayw-alert-error {
    --ayw-alert-border-color: var(--ayw-danger);
    --ayw-alert-bg: var(--ayw-danger);
}

.ayw-alert-solid.ayw-alert-warning {
    --ayw-alert-border-color: var(--ayw-warning);
    --ayw-alert-bg: var(--ayw-warning);
    --ayw-alert-color: var(--ayw-text);
    --ayw-alert-title-color: var(--ayw-text);
    --ayw-alert-icon-color: var(--ayw-text);
}

.ayw-alert-solid.ayw-alert-info {
    --ayw-alert-border-color: var(--ayw-info);
    --ayw-alert-bg: var(--ayw-info);
}


/* ==========================================================
   TAMANHO COMPACTO
   ========================================================== */

.ayw-alert-sm {
    --ayw-alert-gap: var(--ayw-space-2);

    --ayw-alert-padding-y: var(--ayw-space-3);
    --ayw-alert-padding-x: var(--ayw-space-3);

    --ayw-alert-icon-size: 20px;
    --ayw-alert-icon-font-size: 0.9rem;
}


/* ==========================================================
   TAMANHO AMPLO
   ========================================================== */

.ayw-alert-lg {
    --ayw-alert-gap: var(--ayw-space-4);

    --ayw-alert-padding-y: var(--ayw-space-5);
    --ayw-alert-padding-x: var(--ayw-space-5);

    --ayw-alert-radius: var(--ayw-radius-lg);

    --ayw-alert-icon-size: 28px;
    --ayw-alert-icon-font-size: 1.2rem;
}

.ayw-alert-lg .ayw-alert-title {
    font-size: var(--ayw-font-size-md);
}


/* ==========================================================
   ALERTA COMPACTO EM UMA LINHA
   ========================================================== */

.ayw-alert-inline {
    align-items: center;
}

.ayw-alert-inline .ayw-alert-text {
    margin-top: 0;
}

.ayw-alert-inline .ayw-alert-actions {
    flex: 0 0 auto;

    margin-top: 0;
    margin-left: auto;
}


/* ==========================================================
   ALERTA SEM ÍCONE
   ========================================================== */

.ayw-alert-no-icon {
    --ayw-alert-gap: 0;
}


/* ==========================================================
   BOTÃO FECHAR

   Novos templates devem combinar esta classe com buttons.css:

   class="ayw-btn ayw-btn-icon ayw-btn-ghost ayw-alert-close"
   ========================================================== */

.ayw-alert-close {
    flex: 0 0 auto;

    width: 36px;
    min-width: 36px;
    height: 36px;

    margin:
        calc(var(--ayw-space-2) * -1)
        calc(var(--ayw-space-2) * -1)
        0
        auto;

    color: currentColor;

    opacity: 0.7;
}

.ayw-alert-close:hover,
.ayw-alert-close:focus-visible {
    opacity: 1;
}


/* ==========================================================
   COMPATIBILIDADE DO BOTÃO FECHAR ANTIGO

   Mantém .ayw-alert-close funcional sem .ayw-btn.
   ========================================================== */

.ayw-alert-close:not(.ayw-btn) {
    display: inline-grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: var(--ayw-radius-sm);

    background: transparent;
    color: currentColor;

    cursor: pointer;

    font: inherit;
    line-height: 1;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--ayw-transition-fast),
        opacity var(--ayw-transition-fast);
}

.ayw-alert-close:not(.ayw-btn):hover {
    background:
        color-mix(
            in srgb,
            currentColor 12%,
            transparent
        );
}

.ayw-alert-close:not(.ayw-btn):focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 1px;
}

.ayw-alert-close svg,
.ayw-alert-close img {
    display: block;

    width: 1em;
    height: 1em;
}


/* ==========================================================
   ALERTA DESCARTADO

   Pode ser aplicado após a animação ou remoção via JavaScript.
   ========================================================== */

.ayw-alert[hidden],
.ayw-alert.is-hidden {
    display: none;
}


/* ==========================================================
   LISTA DENTRO DO ALERTA
   ========================================================== */

.ayw-alert-list {
    margin:
        var(--ayw-space-2)
        0
        0;

    padding-left: var(--ayw-space-5);

    color: inherit;

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
}

.ayw-alert-list li + li {
    margin-top: var(--ayw-space-1);
}


/* ==========================================================
   MENSAGENS DJANGO
   ========================================================== */

.ayw-messages {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-3);
}

/* Toasts globais: mensagens temporárias sem alterar o fluxo da página. */
.ayw-toast-region {
    position: fixed;
    z-index: 1600;
    top: calc(var(--ayw-topbar-height, 72px) + var(--ayw-space-4));
    right: var(--ayw-space-5);
    display: grid;
    width: min(390px, calc(100vw - 2rem));
    gap: var(--ayw-space-2);
    pointer-events: none;
}

.ayw-toast {
    --toast-accent: var(--ayw-info);
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: var(--ayw-space-3);
    overflow: hidden;
    padding: var(--ayw-space-3) var(--ayw-space-3) var(--ayw-space-3) var(--ayw-space-4);
    border: 1px solid color-mix(in srgb, var(--toast-accent) 28%, var(--ayw-border));
    border-radius: var(--ayw-radius-md);
    background: color-mix(in srgb, var(--ayw-surface) 94%, var(--toast-accent));
    color: var(--ayw-text);
    box-shadow: var(--ayw-shadow-lg);
    pointer-events: auto;
    animation: ayw-toast-enter .24s ease-out both;
}

.ayw-toast.success { --toast-accent: var(--ayw-success); }
.ayw-toast.error { --toast-accent: var(--ayw-danger); }
.ayw-toast.warning { --toast-accent: var(--ayw-warning); }
.ayw-toast.info, .ayw-toast.debug { --toast-accent: var(--ayw-info); }
.ayw-toast.is-leaving { animation: ayw-toast-leave .22s ease-in both; }
.ayw-toast-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--toast-accent) 13%, transparent); color: var(--toast-accent); font-size: .78rem; font-weight: 900; }
.ayw-toast-content { min-width: 0; font-size: var(--ayw-font-size-sm); font-weight: var(--ayw-font-weight-medium); line-height: 1.35; }
.ayw-toast-close { display: grid; width: var(--ayw-icon-size-lg); height: var(--ayw-icon-size-lg); padding: 0; place-items: center; border: 0; border-radius: var(--ayw-radius-full); background: transparent; color: var(--ayw-text-muted); cursor: pointer; font: inherit; font-size: var(--ayw-font-size-lg); }
.ayw-toast-close:hover, .ayw-toast-close:focus-visible { background: var(--ayw-bg-muted); color: var(--ayw-text); }
.ayw-toast-progress { position: absolute; inset: auto 0 0; height: 2px; background: var(--toast-accent); transform-origin: left; animation: ayw-toast-progress 5.2s linear both; }
.ayw-toast:hover .ayw-toast-progress { animation-play-state: paused; }
@keyframes ayw-toast-enter { from { opacity: 0; transform: translate3d(18px, -4px, 0); } to { opacity: 1; transform: none; } }
@keyframes ayw-toast-leave { to { opacity: 0; transform: translate3d(18px, 0, 0); } }
@keyframes ayw-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 767.98px) { .ayw-toast-region { top: calc(var(--ayw-topbar-height, 64px) + var(--ayw-space-3)); right: 1rem; left: 1rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .ayw-toast, .ayw-toast.is-leaving, .ayw-toast-progress { animation: none; } }

.ayw-message {
    width: 100%;
    min-width: 0;
}


/* ==========================================================
   COMPATIBILIDADE COM TAGS DO DJANGO

   Permite combinar diretamente as tags padrão:

   success
   error
   warning
   info
   debug
   ========================================================== */

.ayw-message.success {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-success) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-success-soft);
    --ayw-alert-color: var(--ayw-success);
    --ayw-alert-title-color: var(--ayw-success);
    --ayw-alert-icon-color: var(--ayw-success);
}

.ayw-message.error {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-danger) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-danger-soft);
    --ayw-alert-color: var(--ayw-danger);
    --ayw-alert-title-color: var(--ayw-danger);
    --ayw-alert-icon-color: var(--ayw-danger);
}

.ayw-message.warning {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-warning) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-warning-soft);
    --ayw-alert-color: var(--ayw-warning);
    --ayw-alert-title-color: var(--ayw-warning);
    --ayw-alert-icon-color: var(--ayw-warning);
}

.ayw-message.info {
    --ayw-alert-border-color:
        color-mix(
            in srgb,
            var(--ayw-info) 35%,
            var(--ayw-border)
        );

    --ayw-alert-bg: var(--ayw-info-soft);
    --ayw-alert-color: var(--ayw-info);
    --ayw-alert-title-color: var(--ayw-info);
    --ayw-alert-icon-color: var(--ayw-info);
}

.ayw-message.debug {
    --ayw-alert-border-color: var(--ayw-border);
    --ayw-alert-bg: var(--ayw-bg-soft);
    --ayw-alert-color: var(--ayw-text-muted);
    --ayw-alert-title-color: var(--ayw-text-soft);
    --ayw-alert-icon-color: var(--ayw-text-muted);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-alert-actions > .ayw-btn {
        flex: 1 1 auto;
    }

    .ayw-alert-inline {
        align-items: flex-start;
    }

    .ayw-alert-inline .ayw-alert-actions {
        width: 100%;

        margin-top: var(--ayw-space-3);
        margin-left: 0;
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-alert-close:not(.ayw-btn) {
        transition: none;
    }
}


/* ==========================================================
   TOAST DE AÇÃO
   ========================================================== */

.ayw-action-toast {
    position: fixed;
    z-index: var(--ayw-z-toast);
    right: var(--ayw-space-6);
    bottom: var(--ayw-space-6);
    max-width: min(380px, calc(100% - 32px));
    padding: var(--ayw-space-3) var(--ayw-space-4);
    border-radius: var(--ayw-radius-md);
    background: var(--ayw-success);
    color: var(--ayw-text-inverse);
    box-shadow: var(--ayw-shadow-lg);
    font-weight: var(--ayw-font-weight-bold);
}

.ayw-action-toast.is-error {
    background: var(--ayw-danger);
}

@media (max-width: 639px) {
    .ayw-action-toast {
        right: var(--ayw-space-4);
        bottom: var(--ayw-space-4);
    }
}


/* ==========================================================
   FALLBACK PARA COLOR-MIX
   ========================================================== */

@supports not (
    color:
        color-mix(
            in srgb,
            black,
            white
        )
) {
    .ayw-alert-success,
    .ayw-message.success {
        --ayw-alert-border-color: var(--ayw-success);
    }

    .ayw-alert-danger,
    .ayw-alert-error,
    .ayw-message.error {
        --ayw-alert-border-color: var(--ayw-danger);
    }

    .ayw-alert-warning,
    .ayw-message.warning {
        --ayw-alert-border-color: var(--ayw-warning);
    }

    .ayw-alert-info,
    .ayw-message.info {
        --ayw-alert-border-color: var(--ayw-info);
    }

    .ayw-alert-close:not(.ayw-btn):hover {
        background: var(--ayw-bg-muted);
    }
}