/* ==========================================================================
   TechTerra - Painel do Mestre / Aba EVENTOS -> sub-aba EVENTOS GLOBAIS.
   Folha do `engine/core/mestre_evento_global.js`. Namespace UNICO: `.evg-*`.

   POR QUE ARQUIVO PROPRIO, E NAO O style.css
   O style.css passa de 1,2 MB e e' editado por varias sessoes ao mesmo tempo;
   encostar nele por causa de uma tela nova e' o caminho mais curto pra um
   conflito que derruba a folha inteira. Ha' precedente no repo: mestre_dashboard.css,
   guia_faixa_poder.css e evolucao_anim.css nasceram pelo mesmo motivo.
   O <link> tem que vir DEPOIS do style.css no index.html; onde a ordem importaria
   (o quadrado do upload, que o `.item-img-wrap` fixa em 240x240) a regra daqui foi
   escrita com especificidade maior de proposito, pra nao depender disso.

   O QUE **NAO** ESTA' AQUI (e' reuso, nao esquecimento)
   Casca do wizard (`.mestre-form-*`, `.bf-stepper-*`, `.bf-step`), botoes
   (`.mestre-action-btn`), campos (`.item-field`, `.edit-input`), chances
   (`.chances-editor-*`), pool de itens (`.raid-pool-grupo`, `.raid-prem-*`),
   avisos (`.raid-aviso--warn`), chips de area (`.raid-chips`/`.raid-chip`),
   linhas da lista (`.mestre-passe-row`), estados vazios (`.tt-empty`), switch
   segmentado (`.tt-seg-switch`/`.tt-seg-btn`), filtro por fase (`.tt-fases*`),
   selos de status (`.mestre-passe-status-draft|pending|rejected|homol|pub`),
   selo da linha (`.raid-row-selo`, `.raid-row-selo--homol`), decisao do
   homologador (`.raid-dec-btns`, `.raid-dec-btn`, `.raid-just-wrap`) e stepper
   numerico (`.dinheiro-line.conex-stepper`) vivem no style.css e sao usados por
   classe.
   Recopiar qualquer um deles aqui garantiria que as duas copias divergissem no
   primeiro ajuste que so' uma recebesse.

   NUNCA injetar este CSS por template string em JS: uma crase dentro de CSS em
   template literal ja' quebrou a folha inteira neste projeto, e o `node --check`
   nao pega.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Casca do wizard e da validacao (mesmas medidas do wizard de invasao)
   -------------------------------------------------------------------------- */
.evg-wz-modal { width: min(1080px, 96vw); }
.evg-wz-body { min-height: 320px; }

/* Bloco do passo — o alvo que a validacao acende, mesmo papel do `.raid-bloco`. */
.evg-bloco { margin-bottom: 16px; }
.evg-bloco > .item-field-label { display: block; margin-bottom: 6px; }

/* Caixa de pendencias no topo de cada passo. Os avisos de dentro sao
   `.raid-aviso.raid-aviso--warn` (style.css), que ja tem o contrato de markup
   EMOJI + <span>; aqui so' mora o espacamento. */
.evg-erros { margin-bottom: 12px; }
.evg-erros .raid-aviso { margin-bottom: 6px; }

/* Campo com pendencia: mesma leitura do `.inv-campo-invalido`/`.raid-campo-invalido`. */
.evg-campo-invalido {
    outline: 1px solid rgba(224, 122, 106, 0.75);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Paginacao da lista, no molde do `.inv-pag`. */
.evg-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 0.82rem;
}

/* Miniatura da arte do evento na linha da lista. A lista reusa
   `.mestre-passe-row` inteira; isto aqui e' o unico delta — o evento global tem
   imagem PROPRIA (ver comentario do passo 1), e sem ela a linha ficaria so' texto. */
.evg-row-art {
    width: 62px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 120%, rgba(201, 168, 76, 0.30), rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.evg-row-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   1.b HOMOLOGACAO (V195) — os DOIS eixos na mesma linha

   `status` (a revisao passou?) e `ativo` (esta no ar agora?) sao perguntas
   diferentes, e a lista mostra as duas empilhadas na mesma coluna de status.
   Os SELOS em si sao os `.mestre-passe-status-*` do style.css (draft, pending,
   rejected, homol, pub) — os MESMOS que a raid usa pros mesmos estados. Aqui so'
   mora o empilhamento; recopiar as cores garantiria divergencia na primeira
   troca de paleta.
   -------------------------------------------------------------------------- */
.evg-status-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* Fallback da sub-navegacao (Meus eventos / Para eu homologar) quando o
   `AlternartMestrarSession.filtroFasesHtml` nao estiver carregado. Os botoes
   sao `.tt-seg-btn` do style.css; isto e' so' a caixa. */
.evg-nav {
    display: inline-flex;
    border: 1px solid var(--gold-dark, #6b5526);
    border-radius: 8px;
    overflow: hidden;
    margin: 2px 0 12px;
}

/* "Precisa de VOCE": evento de OUTRO narrador parado na revisao. Mesma
   linguagem amarela do `.raid-row-selo--homol` e da borda da lista de raid —
   amarelo aqui significa acao SUA, e por isso nunca aparece no proprio evento
   aguardando revisao. */
.evg-row--atencao {
    border-left: 3px solid rgba(233, 196, 106, 0.85);
    background: linear-gradient(90deg, rgba(233, 196, 106, 0.10), rgba(233, 196, 106, 0) 42%);
}

/* O MOTIVO da reprovacao, na propria linha da lista.

   Fica VISIVEL (e nao atras de um clique) porque e' o unico texto que diz ao
   criador o que corrigir: escondido, "reprovado" vira uma parede sem porta.
   O `-webkit-line-clamp` corta em 3 linhas pra um motivo longo nao empurrar a
   lista inteira; o texto inteiro continua no `title` da linha. */
.evg-motivo {
    margin-top: 6px;
    padding: 6px 10px;
    border-left: 2px solid rgba(224, 122, 106, 0.7);
    background: rgba(224, 122, 106, 0.08);
    border-radius: 0 6px 6px 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #e6cfc9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.evg-motivo b {
    color: #e07a6a;
    font-weight: 700;
    margin-right: 4px;
}

/* Modal de decisao do homologador. Os botoes e a justificativa sao os da raid
   (`.raid-dec-btns`, `.raid-dec-btn`, `.raid-just-wrap`, style.css): e' a MESMA
   tela conceitual. Aqui so' a largura e o resumo rolavel — sem o `max-height`,
   um evento com 13 modificadores empurraria os botoes de decisao para fora da
   janela e o revisor nao teria como decidir. */
.evg-dec-modal { width: min(760px, 96vw); }
.evg-dec-resumo {
    max-height: 46vh;
    overflow-y: auto;
    margin-bottom: 12px;
    padding-right: 4px;
}


/* --------------------------------------------------------------------------
   2. Passo 1 — Identidade em DUAS COLUNAS

   A imagem manda na altura da linha; a descricao ESTICA pra bater com ela
   (align-items: stretch + o textarea em flex:1), em vez de ficar um campo
   baixinho com um vao morto do lado.
   -------------------------------------------------------------------------- */
.evg-ident {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}
.evg-ident-col { display: flex; flex-direction: column; min-width: 0; }
.evg-ident-col .item-field { display: flex; flex-direction: column; }

/* A coluna do texto: nome em cima, descricao comendo o resto. */
.evg-ident-txt .evg-desc-field { flex: 1; min-height: 0; }
.evg-ident-txt .evg-desc-field textarea { flex: 1; min-height: 96px; resize: vertical; }

/* O quadrado do upload. `.item-img-wrap` (o componente compartilhado) fixa
   240x240; o seletor abaixo tem DOIS niveis de propositalmente pra ganhar dele
   por especificidade, e nao por ordem de <link>. */
.evg-ident .evg-img-slot { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.evg-img-hint { font-size: 0.74rem; color: #9c917c; line-height: 1.5; margin-top: 8px; }

@media (max-width: 620px) {
    .evg-ident { grid-template-columns: 1fr; }
}

/* Nota com barra dourada — usada nas explicacoes que o narrador PRECISA ler
   (a semantica do valor, o alcance do escopo, o que a imagem global e'). */
.evg-nota-forte { border-left: 2px solid #c9a84c; padding-left: 10px; }


/* --------------------------------------------------------------------------
   3. Previa do banner do jogador

   A arte de EXEMPLO vem rotulada em DOIS lugares (o chip do titulo e a tarja
   dentro do banner): uma arte bonita sem aviso passa a impressao de que o
   evento ja' tem imagem.
   -------------------------------------------------------------------------- */
.evg-banner {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: #0d0a05;
    aspect-ratio: 16 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.evg-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evg-banner-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.72) 100%);
}
.evg-banner-txt { position: relative; text-align: center; padding: 0 18px; }
.evg-banner-txt .n {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    color: #f4e2ad;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.evg-banner-txt .m {
    margin-top: 5px;
    font-size: 0.74rem;
    color: #d8cbb0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
/* Sem arte nenhuma (nem a de exemplo): painel neutro em vez de moldura preta. */
.evg-banner-vazio {
    position: relative;
    font-family: 'Lora', serif;
    font-size: 0.76rem;
    color: #9c917c;
    text-align: center;
    padding: 0 18px;
}

.evg-exemplo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 8px;
    font-family: 'Lora', serif;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(201, 168, 76, 0.14);
    color: #e8c56a;
    border: 1px solid rgba(201, 168, 76, 0.4);
}
.evg-banner-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: 'Lora', serif;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(0, 0, 0, 0.72);
    color: #e8c56a;
    border: 1px solid rgba(201, 168, 76, 0.45);
}


/* --------------------------------------------------------------------------
   4. Seletor de semantica ("Como o valor e' lido") e escopo/periodo

   Cartoes largos, e nao `.tt-seg-switch`: a decisao aqui SO' fica clara com o
   exemplo numerico embaixo do titulo ("Elite 1% com +100% -> 2,0%"), e o switch
   segmentado do sistema so' comporta um rotulo curto.
   -------------------------------------------------------------------------- */
.evg-modo { display: flex; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.evg-modo-op {
    flex: 1 1 210px;
    text-align: left;
    cursor: pointer;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(201, 168, 76, 0.25);
    background: rgba(0, 0, 0, 0.3);
    color: #cdbf9f;
    font-family: 'Lora', serif;
    font-size: 0.78rem;
    line-height: 1.45;
}
.evg-modo-op:hover { border-color: rgba(201, 168, 76, 0.55); }
.evg-modo-op.sel {
    border-color: #c9a84c;
    background: rgba(201, 168, 76, 0.14);
    color: #f0e6d2;
}
.evg-modo-op b {
    display: block;
    font-family: 'Cinzel', serif;
    color: #e8c56a;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

/* Dias da semana: os BOTOES sao `.tt-seg-btn` (o componente do sistema, o mesmo
   que a invasao usa); aqui so' mora o container. */
.evg-dias { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }


/* --------------------------------------------------------------------------
   5. Passo 4 — linhas de modificador

   Espelha `.chances-editor-row` (a mesma altura, os mesmos botoes de 22px), mas
   com DUAS colunas a mais: o valor do narrador e o EFEITO calculado ao vivo. E'
   o efeito que faz o narrador entender o que acabou de configurar sem abrir o
   jogo. Por causa dessas duas colunas a grade nao pode ser a do
   `.chances-editor-row` (fixa em 4 colunas) — os BOTOES continuam sendo o mesmo
   componente, so' o template da linha muda.
   -------------------------------------------------------------------------- */
.evg-mod-grid { display: flex; flex-direction: column; gap: 3px; }
.evg-mod-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 22px 62px 22px 150px;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
}
.evg-mod-row:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.evg-mod-row.is-on { background: rgba(201, 168, 76, 0.10); }
.evg-mod-icon { text-align: center; font-size: 0.95rem; }
.evg-mod-label {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cdbf9f;
}
.evg-mod-val { text-align: center; font-size: 0.8rem; font-weight: 700; color: #f0e6d2; }
.evg-mod-val.zero { color: #6f6858; }
.evg-mod-efeito {
    font-size: 0.72rem;
    text-align: right;
    color: #9c917c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evg-mod-efeito b { color: #7fd191; font-weight: 700; }
.evg-mod-efeito b.down { color: #d98a8a; }

/* Chave que EXISTE no catalogo mas que o servidor ainda nao aplica
   (`aplicado:false`). Ela aparece — apagar da tela esconderia do narrador que a
   alavanca existe — mas travada: o backend recusa o cadastro dela
   (400 `chave_nao_aplicada`), e salvar um valor que nao faz nada seria pior. */
.evg-mod-row.is-off { opacity: 0.5; }
.evg-mod-row.is-off .evg-mod-label { color: #8d8577; }
.evg-mod-selo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    font-family: 'Lora', serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.06);
    color: #9c917c;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* Titulo de grupo do catalogo (Progressao / Encontro / Raridade / Item). */
.evg-grupo-tit {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    color: #e8c56a;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(201, 168, 76, 0.16);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.evg-grupo-tit small {
    font-family: 'Lora', serif;
    text-transform: none;
    letter-spacing: 0;
    color: #8d8577;
    font-size: 0.72rem;
    font-weight: 400;
}


/* --------------------------------------------------------------------------
   6. Passo 5 — bloco INDISPONIVEL nesta versao

   O passo de Drops existe na tela porque foi aprovado no mock, mas o servidor
   ainda nao tem as chaves de drop (`chance_item` volta do catalogo com
   `aplicado:false`) nem campo de pool no corpo do evento. Em vez de esconder o
   passo — o que faria o narrador achar que o recurso nunca foi desenhado — ele
   fica VISIVEL e travado, com o aviso em cima.
   -------------------------------------------------------------------------- */
.evg-indispo {
    position: relative;
    opacity: 0.5;
    filter: grayscale(0.35);
    pointer-events: none;
    user-select: none;
}


/* --------------------------------------------------------------------------
   7. Passo 6 — Revisao
   -------------------------------------------------------------------------- */
.evg-rev-lin {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
}
.evg-rev-lin b {
    font-family: 'Cinzel', serif;
    color: #e8c56a;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.evg-rev-lin span { color: #cdbf9f; }

.evg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.evg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    border: 1px solid rgba(201, 168, 76, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #cdbf9f;
}


/* --------------------------------------------------------------------------
   CONGELAMENTO (V214) — homologado ou no ar nao pode ser editado nem excluido.

   O servidor recusa com 409 `congelado`, entao a tela DESABILITA o lapis e a
   lixeira em vez de deixar clicar: botao que sempre da' erro e' pior que botao
   desabilitado que explica. Escondidos seria pior ainda — o narrador
   procuraria o lapis que sumiu.

   ⚠️ POR QUE O <span> DE FORA EXISTE
   Navegador nao dispara evento de mouse em controle `disabled`: um `title` no
   proprio <button> NUNCA apareceria, e o narrador veria dois icones apagados
   sem nenhuma explicacao. O `title` mora no `.evg-frio-wrap`, que nao esta'
   desabilitado; o `pointer-events: auto` garante isso mesmo se o botao de
   dentro herdar `none` de algum reset.
   -------------------------------------------------------------------------- */
.evg-frio-wrap {
    display: inline-flex;
    pointer-events: auto;
    cursor: not-allowed;
}
.evg-frio-wrap > .mestre-action-btn[disabled] {
    opacity: 0.4;
    filter: grayscale(0.8);
    cursor: not-allowed;
    /* Sem pointer-events: none — o <span> ja' captura o hover do title, e zerar
       aqui nao muda nada (o botao disabled ja' nao clica). */
}

/* Botao Revogar na linha do evento homologado. Ele NAO e' `--danger`: revogar
   nao destroi nada (o evento volta pra rascunho, inteiro), e pintar de vermelho
   o unico caminho de saida do congelamento faria o narrador ter medo de usar a
   porta. O dourado-frio o separa do Ligar/Desligar sem gritar. */
.evg-btn-revogar {
    border-color: rgba(140, 180, 210, 0.45);
    color: #cfe2ef;
    white-space: nowrap;
}
.evg-btn-revogar:hover:not([disabled]) {
    border-color: rgba(140, 180, 210, 0.85);
    background: rgba(140, 180, 210, 0.12);
}

/* Modal da revogacao. Mesma casca do `.evg-dec-modal` (a justificativa e' a
   `.raid-just-wrap` da raid); so' o aviso de topo ganha peso, porque e' ele que
   diz que o evento vai SAIR DO AR. */
.evg-rev-modal .raid-just-wrap { display: block; }
.evg-rev-modal .evg-nota-forte {
    border-left-color: #7fb0d0;
    background: rgba(127, 176, 208, 0.08);
    padding: 8px 10px;
    border-radius: 0 6px 6px 0;
}