/* ==========================================================================
   Feedback — etiquetas, avisos, notificações e estado vazio

   Todo tom segue o mesmo contrato de tokens:
     -text     cor do texto (única válida sobre fundo light)
     -surface  fundo light
     -border   contorno
     -solid    preenchimento sólido e traço (barra, ponto, toast)

   O bug que este arquivo encerra: `.notice` estava declarado duas vezes em
   core.css, e o segundo bloco sobrescrevia os modificadores --danger e --info
   declarados entre os dois. Aqui existe uma declaração de cada seletor.
   ========================================================================== */

/* ==========================================================================
   Etiqueta de estado
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    /* A etiqueta de etapa leva um .dot antes do texto; sem o gap eles colam. */
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    background: var(--color-neutral-surface);
    color: var(--color-neutral-text);
    white-space: nowrap;
}

.badge--success { background: var(--color-success-surface); color: var(--color-success-text); }
.badge--warning { background: var(--color-warning-surface); color: var(--color-warning-text); }
.badge--danger  { background: var(--color-danger-surface);  color: var(--color-danger-text); }
.badge--info    { background: var(--color-info-surface);    color: var(--color-info-text); }
.badge--purple  { background: var(--color-purple-surface);  color: var(--color-purple-text); }
.badge--neutral { background: var(--color-neutral-surface); color: var(--color-neutral-text); }

/* Texto longo (mensagem de validação) quebra em vez de invadir a coluna vizinha. */
.badge--wrap { white-space: normal; text-align: left; }

/* Etiqueta com ícone (selo de origem do dado, plataforma de campanha). O gap
   já vem do bloco base; falta só o tamanho, como o .chip já faz. */
.badge .ui-icon { width: 12px; height: 12px; flex: 0 0 auto; }

/* ==========================================================================
   Marcadores

   O tom nunca é a única pista: sempre acompanham um rótulo em texto
   (WCAG 1.4.1 — não transmitir informação só por cor).
   ========================================================================== */

.dot {
    width: 9px; height: 9px;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
    background: var(--color-neutral-solid);
}

.dot--sm { width: 8px; height: 8px; }

/* Ponto usa o tom `-text`, não o `-solid`: com 9px a mancha é pequena demais
   para o tom vivo se sustentar (o success `-solid` dá 2.59:1 sobre branco).
   Superfícies maiores — .accent, .progress__fill, faixa do board-card —
   continuam no `-solid`, onde o tom vivo é justamente o ponto. */
.dot--success { background: var(--color-success-text); }
.dot--info    { background: var(--color-info-text); }
.dot--purple  { background: var(--color-purple-text); }
.dot--warning { background: var(--color-warning-text); }
.dot--danger  { background: var(--color-danger-text); }
.dot--neutral { background: var(--color-border-strong); }

.accent {
    width: var(--border-width-emphasis);
    height: var(--space-8);
    border-radius: var(--border-width-emphasis);
    background: var(--color-neutral-solid);
}

.accent--success { background: var(--color-success-solid); }
.accent--warning { background: var(--color-warning-solid); }
.accent--danger  { background: var(--color-danger-solid); }
.accent--info    { background: var(--color-info-solid); }

/* ==========================================================================
   Chip — categoria, prazo, metadado discreto
   ========================================================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: 2px var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-body-secondary);
    font-size: var(--fs-xs);
    color: var(--color-text);
    white-space: nowrap;
}

.chip .ui-icon { width: 12px; height: 12px; }

.chip--danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
}

.chip--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-surface);
    color: var(--color-warning-text);
}

/* ==========================================================================
   Aviso inline

   Uma única declaração base + modificadores por tom.
   ========================================================================== */

.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-box);
    background: var(--color-body-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--color-text);
}

.notice .ui-icon { margin-top: 1px; }

.notice__icon { display: flex; padding-top: 1px; }
.notice__body { flex: 1 1 0; min-width: 0; text-wrap: pretty; }
.notice__body strong { font-weight: var(--fw-semibold); }

.notice--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-surface);
    color: var(--color-warning-text);
}

.notice--danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
}

.notice--info {
    border-color: var(--color-info-border);
    background: var(--color-info-surface);
    color: var(--color-info-text);
}

.notice--success {
    border-color: var(--color-success-border);
    background: var(--color-success-surface);
    color: var(--color-success-text);
}

/* Módulo em demonstração — dados não são gravados.

   Deliberadamente destacado com a borda-guia à esquerda: é mais barato
   assustar um pouco do que deixar a operação registrar atendimento numa tela
   que não persiste nada. Antes desta correção o aviso caía no bloco base e
   renderizava a 1.51:1 — visualmente presente, praticamente ilegível. */
.notice--demo {
    margin: 0 var(--gutter) var(--space-4);
    border-color: var(--color-warning-border);
    border-left-width: var(--border-width-emphasis);
    background: var(--color-warning-surface);
    color: var(--color-warning-text);
}

/* Aviso em nível de página — fora de card e fora do .grid. Precisa do mesmo
   respiro lateral do --demo, senão encosta na borda da viewport. É só o
   posicionamento: a cor continua vindo do modificador de tom. */
.notice--page { margin: 0 var(--gutter) var(--space-4); }

/* ==========================================================================
   Notificação flutuante (toast)

   Canto superior direito, superfície clara e SEM sombra. Todos os estados usam
   a mesma composição; somente os tokens semânticos de fundo, borda e texto
   mudam. Se voltar a aparecer `box-shadow` aqui, é regressão.

   A largura fica na pilha, não no toast: assim dois avisos seguidos saem do
   mesmo tamanho, em vez de cada um encolher até o próprio texto.

   O par `surface` + `text` preserva contraste AA sem transformar um estado em
   um bloco visualmente mais pesado que os demais.
   ========================================================================== */

.toast-stack {
    position: fixed;
    right: var(--space-5);
    top: var(--space-5);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(300px, calc(100vw - var(--space-10)));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-neutral-border);
    border-radius: var(--radius-box);
    background: var(--color-neutral-surface);
    color: var(--color-neutral-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    transition: opacity .2s;
    animation: toast-in .24s ease-out both;
}

/* Entrada vindo da direita. Quem pediu menos movimento não recebe nenhum. */
@keyframes toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

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

.toast--danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-surface);
    color: var(--color-danger-text);
}

.toast--info {
    border-color: var(--color-info-border);
    background: var(--color-info-surface);
    color: var(--color-info-text);
}

.toast--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-surface);
    color: var(--color-warning-text);
}

.toast--success {
    border-color: var(--color-success-border);
    background: var(--color-success-surface);
    color: var(--color-success-text);
}

.toast__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.toast__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    letter-spacing: .01em;
}

/* O ícone acompanha o título e não encolhe quando o texto quebra. */
.toast__title .ui-icon { flex: 0 0 auto; }

/* Hierarquia sem trocar de cor: o corpo é o mesmo tom com menos peso. */
.toast__text { opacity: .88; }

.toast__close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .7;
    padding: 0;
    font-size: var(--fs-md);
    line-height: 1;
}

.toast__close:hover { opacity: 1; }

.toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: var(--focus-offset); opacity: 1; }

/* ==========================================================================
   Estado vazio
   ========================================================================== */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--gutter);
    text-align: center;
}

.empty__icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: var(--color-body-tertiary);
    color: var(--color-text-secondary);
}

.empty__icon .ui-icon { width: var(--space-5); height: var(--space-5); }

.empty__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.empty__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-title); }

.empty__text {
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    max-width: var(--container-measure);
    line-height: var(--lh-base);
}

.empty__actions { margin-top: var(--space-1); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   Menu flutuante
   ========================================================================== */

.menu {
    position: absolute;
    z-index: var(--z-dropdown);
    min-width: 210px;
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-box);
    background: var(--color-body);
    color: var(--color-text);
    box-shadow: var(--shadow-menu);
}

/* Em linha de tabela, galeria e item de lista o menu é reposicionado por JS
   para `fixed` e encosta na linha: a sombra ali duplicaria a borda. */
.menu--flat { box-shadow: none; }

.menu--right { right: 0; }
.menu--up { bottom: calc(100% + var(--space-2)); }
.menu--down { top: calc(100% + var(--space-2)); }

/* Item de menu — e SÓ item de menu.

   Esta regra zera borda e fundo de todo `a`/`button` do menu, o que é certo
   para menu de ação: ali cada filho É um item. No painel de filtros não existe
   item nenhum — todo `button` é controle de formulário (o gatilho do select do
   design system e os botões Aplicar/Limpar). A regra apagava a borda dos
   selects e a cor dos botões, porque `.menu button` (0,1,1) vence qualquer
   componente de classe única (0,1,0) — select, gatilho do select e botão.

   A exclusão vai dentro de `:where()` porque `:where()` não soma
   especificidade: sem ele o seletor subiria para (0,2,1) e passaria a vencer
   `.menu .menu__danger` (0,2,0), fazendo o item de excluir sair cinza. */
.menu:not(:where(.menu--filters)) a,
.menu:not(:where(.menu--filters)) button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: inherit;
    text-align: left;
}

.menu:not(:where(.menu--filters)) a:hover,
.menu:not(:where(.menu--filters)) button:hover { background: var(--color-body-tertiary); }

.menu:not(:where(.menu--filters)) a:focus-visible,
.menu:not(:where(.menu--filters)) button:focus-visible {
    outline: var(--focus-outline);
    outline-offset: calc(var(--focus-offset) * -1);
}

.menu__sep { height: 1px; margin: var(--space-1) 0; background: var(--color-border); }

/* Menu de filtros: o único que abriga campo em vez de item de ação.

   Cada select escolhe a caixa que serve ao seu conteúdo. Responsável e Origem
   usam o select com busca do design system, que sabe desenhar avatar e ícone
   na opção; Etapa e Prioridade ficam nativos (`data-select-search="never"`),
   porque a cor do tom já os distingue e a lista é curta.

   O popover do select vive DENTRO deste painel, e os dois têm regra própria de
   fechar ao clicar fora. Quem resolve o conflito é o `data-menu-keep` na view
   (o painel ignora clique interno) mais o `closeMenus` do select, que preserva
   o menu que o contém. */
.menu--filters {
    width: 288px;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* O menu de filtros é um FORMULÁRIO, e formulário não fecha ao ser tocado.

   O `initMenus` fecha todo menu em qualquer clique do documento — correto para
   menu de ações, onde clicar é escolher e sair. Aqui, tocar num select fecharia
   o painel antes de a pessoa escolher. O `data-menu-keep` na view desliga esse
   fechamento; quem fecha passa a ser Aplicar, Limpar ou o próprio botão. */
.menu--filters .field__label { font-size: var(--fs-xs); }

.menu--filters .menu__actions { display: flex; gap: var(--space-2); }
.menu--filters .menu__actions .btn { flex: 1 1 0; }

/* Duas classes de propósito: `.menu button` (0,1,1) vencia `.menu__danger`
   (0,1,0) por especificidade e o item de deletar saía cinza como os outros. */
.menu .menu__danger,
.icon-btn.menu__danger { color: var(--color-danger-text); }

.menu button.menu__danger:hover,
.menu a.menu__danger:hover { background: var(--color-danger-surface); color: var(--color-danger-text); }

@media print {
    .toast-stack { display: none !important; }
}