/* ==========================================================================
   Eesier Avisos (design system component)
   Razor: Views/Shared/_Banner.cshtml · Model: BannerViewModel · JS: js/toast.js
   Documentação: /Design/Avisos.

   Três vozes de aviso, uma só língua:
   — BANNER: persistente, mora na página, superfície semântica suave + filete
     esquerdo na tinta cheia. Erros SEMPRE aparecem num banner — nunca somem.
   — TOAST: transitório, confirma uma ação e sai sozinho; erro NÃO sai sozinho
     (fica até a pessoa fechar). API: EesierToast.show(mensagem, tipo).
   — TOOLTIP: uma frase de contexto no hover/focus, via [data-etooltip].

   Cores fluem dos tokens com fallback literal — este arquivo também é
   consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-banner {
    --ebn-color: var(--color-palette-primary, #1c91e4);
    --ebn-surface: var(--color-palette-primary-surface, #eef7ff);
    --ebn-text: var(--color-text-dark, #0f172a);
    --ebn-muted: var(--color-muted, #475569);

    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-small, 12px);
    padding: var(--space-medium, 24px);
    border-radius: var(--radius-standard, 12px);
    border-left: var(--space-tight, 6px) solid var(--ebn-color);
    background: var(--ebn-surface);
    color: var(--ebn-text);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
}


.eesier-banner.eesier-banner-success {
    --ebn-color: var(--color-success, #22c55e);
    --ebn-surface: var(--color-success-surface, #f0fdf4);
}


.eesier-banner.eesier-banner-warning {
    --ebn-color: var(--color-warning, #f59e0b);
    --ebn-surface: var(--color-warning-surface, #fffbeb);
}


.eesier-banner.eesier-banner-danger {
    --ebn-color: var(--color-danger, #ef4444);
    --ebn-surface: var(--color-danger-surface, #fef2f2);
}


/* NO ESCURO A SUPERFÍCIE SUAVE É A TINTA A 12% SOBRE O CANVAS — MESMO GESTO DO BADGE */

.dark .eesier-banner,
.eesier-banner.dark {
    --ebn-surface: color-mix(in srgb, var(--ebn-color) 12%, transparent);
    --ebn-text: var(--color-text-on-dark, #ffffff);
    --ebn-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


.eesier-banner > .eesier-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ebn-color);
}


.eesier-banner > .eesier-banner-icon > .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}


/* PISO DE LEITURA — A MENSAGEM NUNCA ESPREME ABAIXO DE 7 PASSOS DA GRADE
   (168px): SEM ESPAÇO, A AÇÃO QUEBRA PARA A PRÓPRIA LINHA (flex-wrap) EM VEZ
   DE ESMAGAR A PROSA NUMA COLUNA DE UMA PALAVRA. */

.eesier-banner > .eesier-banner-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight, 6px);
    flex-grow: 1;
    flex-basis: calc(var(--space-medium, 24px) * 7);
    min-width: 0;
}


.eesier-banner > .eesier-banner-body > .eesier-banner-title {
    font-weight: 700;
    line-height: 1.5;
    text-transform: lowercase;
}


.eesier-banner > .eesier-banner-body > .eesier-banner-message {
    font-weight: 500;
    line-height: var(--space-medium, 24px);
    color: var(--ebn-muted);
    overflow-wrap: anywhere;
}


/* EXCEÇÃO DE MARGEM — margin-left:auto EMPURRA A AÇÃO PARA A BORDA DIREITA,
   UMA COMPOSIÇÃO QUE gap NÃO EXPRESSA. */

.eesier-banner > .eesier-banner-action {
    margin-left: auto;
    flex-shrink: 0;
}


/* ------------------------------------------------------------------------------ */


/* TOASTS — PILHA ANCORADA (DESKTOP: CANTO INFERIOR DIREITO; TOQUE: CENTRO
   INFERIOR), NO MÁXIMO 3 VISÍVEIS. CADA TOAST É A FOLHA DO SISTEMA COM O
   MESMO FILETE SEMÂNTICO DO BANNER. ENTRA VIAJANDO DE BAIXO (--ease-travel). */

.eesier-toasts {
    position: fixed;
    right: var(--space-medium, 24px);
    bottom: var(--space-medium, 24px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-small, 12px);
    pointer-events: none;
}


@media (max-width: 720px) {

    .eesier-toasts {
        right: var(--space-medium, 24px);
        left: var(--space-medium, 24px);
        align-items: stretch;
    }
}


.eesier-toasts > .eesier-toast {
    --ets-color: var(--color-palette-primary, #1c91e4);
    --ets-surface: var(--color-surface, #ffffff);
    --ets-text: var(--color-text-dark, #0f172a);
    --ets-shadow: color-mix(in srgb, var(--color-text-dark, #0f172a) 8%, transparent);

    display: flex;
    align-items: center;
    gap: var(--space-small, 12px);
    max-width: 420px;
    padding: var(--space-small, 12px) var(--space-medium, 24px);
    border-radius: var(--radius-standard, 12px);
    border-left: var(--space-tight, 6px) solid var(--ets-color);
    background: var(--ets-surface);
    box-shadow: 0 var(--space-small, 12px) var(--space-medium, 24px) var(--ets-shadow);
    color: var(--ets-text);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    pointer-events: auto;
    animation: eesier-toast-enter var(--motion-standard, 0.36s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1)) both;
}


.dark .eesier-toasts > .eesier-toast,
.eesier-toasts.dark > .eesier-toast {
    --ets-surface: var(--color-surface-dark, #101f38);
    --ets-text: var(--color-text-on-dark, #ffffff);
    --ets-shadow: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
}


.eesier-toasts > .eesier-toast.eesier-toast-success {
    --ets-color: var(--color-success, #22c55e);
}


.eesier-toasts > .eesier-toast.eesier-toast-danger {
    --ets-color: var(--color-danger, #ef4444);
}


.eesier-toasts > .eesier-toast.eesier-toast-warning {
    --ets-color: var(--color-warning, #f59e0b);
}


.eesier-toasts > .eesier-toast > .eesier-toast-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--ets-color);
}


.eesier-toasts > .eesier-toast > .eesier-toast-icon > .eicon {
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
}


.eesier-toasts > .eesier-toast > .eesier-toast-message {
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* FECHAR — UM ALVO QUADRADO SILENCIOSO; O ÍCONE RESPONDE SÓ COM COR */

.eesier-toasts > .eesier-toast > .eesier-toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    padding: var(--space-tight, 6px);
    background: transparent;
    color: var(--color-muted, #475569);
    cursor: pointer;
    transition: color var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


.dark .eesier-toasts > .eesier-toast > .eesier-toast-close {
    color: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


@media (hover: hover) {

    .eesier-toasts > .eesier-toast > .eesier-toast-close:hover {
        color: var(--ets-text);
    }
}


.eesier-toasts > .eesier-toast > .eesier-toast-close > .eicon {
    width: var(--space-small, 12px);
    height: var(--space-small, 12px);
}


.eesier-toasts > .eesier-toast.eesier-toast-leaving {
    animation: eesier-toast-leave var(--motion-quick, 0.18s) var(--ease-state, ease-in-out) both;
}


@keyframes eesier-toast-enter {
    from {
        opacity: 0;
        transform: translateY(var(--space-small, 12px));
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes eesier-toast-leave {
    from {
        opacity: 1;
    }


    to {
        opacity: 0;
    }
}


/* ------------------------------------------------------------------------------ */


/* TOOLTIP — UMA FRASE DE CONTEXTO SOBRE O CANVAS ESCURO, ACIMA DO ALVO POR
   PADRÃO ([data-etooltip-pos="bottom"] INVERTE). SÓ TEXTO: title= CONTINUA
   SENDO O FALLBACK ACESSÍVEL. */

[data-etooltip] {
    position: relative;
}


/* LARGURA: max-content ATÉ O TETO DE 240px (10 × 24px DA GRADE) — FRASES
   CURTAS FICAM NUMA LINHA; ALGO MAIS LONGO QUEBRA EM VEZ DE VAZAR DA TELA. */

[data-etooltip]::after {
    content: attr(data-etooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-tight, 6px));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(var(--space-medium, 24px) * 10);
    padding: var(--space-tight, 6px) var(--space-small, 12px);
    border-radius: var(--radius-standard, 12px);
    background: var(--color-canvas-dark, #0a1628);
    color: var(--color-text-on-dark, #ffffff);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.5;
    text-transform: lowercase;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


[data-etooltip][data-etooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + var(--space-tight, 6px));
}


[data-etooltip]:hover::after,
[data-etooltip]:focus-visible::after {
    opacity: 1;
}


@media (prefers-reduced-motion: reduce) {

    .eesier-toasts > .eesier-toast,
    .eesier-toasts > .eesier-toast.eesier-toast-leaving {
        animation: none;
    }


    [data-etooltip]::after {
        transition: none;
    }
}