/*
    O diagrama da definição de processo.

    Como a pagina-inicial.css: está à parte da skin de propósito. A skin é uma
    camada de gosto que se desliga tirando o <link>; isto é o que faz o desenho
    ler-se — sem as regras de cor das setas condicionais, um caminho que só às
    vezes se segue fica igual a um que se segue sempre, e o diagrama passa a
    mentir.

    As cores vêm das variáveis --i9-* da skin.css, com fallback no var() para
    quando ela não estiver lá.
*/

/*
    O tabindex existe para o Esc sair do ecra completo, e o foco poe-se por
    codigo — nao e' um controlo a que se chegue pelo Tab. Por isso nao leva
    contorno: uma moldura laranja a' volta do diagrama inteiro so' dizia a quem
    a visse que algo tinha corrido mal.
*/
.i9-fluxo:focus,
.i9-fluxo:focus-visible {
    outline: none;
}

.i9-fluxo {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-height: 0;
    height: 100%;
}

/*
    O diagrama a ocupar o ecrã todo.

    Camada fixa por cima da página, e não a API de ecrã completo do browser: com
    essa, o elemento passa a ser a raiz da pilha e os popups do XAF — a forma da
    atividade, o construtor de critérios — abriam por baixo e ficavam
    invisíveis. Assim o diagrama cresce e a aplicação continua inteira.

    Não começa no topo: a barra de ações da vista fica de fora, porque é de lá
    que sai o Gravar e o diagrama não grava nada sozinho. Quem mede o sítio é o
    fluxo.js — a altura muda com o tema e parte-se em duas linhas em janelas
    estreitas, por isso não serve um número escrito aqui. O 140px é só a
    reserva para quando a medida falha.

    O 1035 também não é ao acaso: o cabeçalho da aplicação está em 1030 e os
    modais do DevExpress em 1040. Ficar entre os dois deixa o diagrama por cima
    do conteúdo e os popups do XAF por cima dele.
*/
.i9-fluxo--expandido {
    position: fixed;
    top: var(--i9-fluxo-topo, 140px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    margin: 0;
    padding: 1rem;
    background: var(--i9-card, #fff);
}

.i9-fluxo__barra {
    flex: 0 0 auto;
}

/*
    A tela rola nos dois sentidos. Um fluxo com seis ramos é mais largo do que
    qualquer ecrã, e encolher o desenho para caber tornava o texto dos nós
    ilegível — mais vale arrastar para ver do que ver tudo e não ler nada.
*/
.i9-fluxo__tela {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: .25rem;
    border: 1px solid var(--i9-line, rgba(20, 50, 95, .11));
    border-radius: var(--i9-radius, 16px);
    background: var(--i9-card, #fff);
}

.i9-fluxo__svg {
    display: block;
}

/* ---- banda das que arrancam ao mesmo tempo ------------------------------ */

/*
    Fundo esbatido e moldura tracejada, atrás das caixas. Discreto de propósito:
    é contexto, não é mais um nó — se tivesse peso de caixa passava a parecer
    uma atividade que contém as outras, que é coisa que o motor não tem.
*/
.i9-fluxo__banda rect {
    fill: var(--i9-accent-softer, rgba(47, 111, 184, .05));
    stroke: var(--i9-line, rgba(20, 50, 95, .18));
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.i9-fluxo__banda text {
    font-size: 11px;
    fill: var(--i9-muted, #6b7a90);
}

/* ---- setas -------------------------------------------------------------- */

.i9-fluxo__seta {
    fill: none;
    stroke: var(--i9-muted, #6b7a90);
    stroke-width: 1.6;
}

/*
    O caminho condicional vai a tracejado e na cor de destaque. É a distinção
    que a árvore não fazia: aqui o processo só continua se a regra der
    verdadeira, e isso tem de se ver sem passar o rato por cima.
*/
.i9-fluxo__seta--condicional {
    stroke: var(--i9-accent, #2f6fb8);
    stroke-dasharray: 6 4;
}

/* A junção: o ramo de que uma atividade também espera. Pontilhado, para não se
   confundir com a seta principal nem com uma condição. */
.i9-fluxo__seta--juncao {
    stroke-dasharray: 2 4;
    stroke-linecap: round;
}

.i9-fluxo__condicao rect {
    fill: var(--i9-card, #fff);
    stroke: var(--i9-accent, #2f6fb8);
    stroke-width: 1;
}

.i9-fluxo__condicao text {
    font-size: 11px;
    font-style: italic;
    fill: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__condicao {
    cursor: pointer;
}

/*
    A etiqueta de uma seta que ainda não tem condição. Fica esbatida: tem de se
    ver que há ali onde carregar, sem competir com as condições que existem
    mesmo — num fluxo de vinte atividades, vinte círculos a cheio davam um
    diagrama de botões em vez de um diagrama de processo.
*/
.i9-fluxo__condicao--vazia circle {
    fill: var(--i9-card, #fff);
    stroke: var(--i9-line, rgba(20, 50, 95, .3));
    stroke-width: 1;
    stroke-dasharray: 3 2;
    opacity: .55;
}

.i9-fluxo__condicao-mais {
    stroke: var(--i9-muted, #6b7a90);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .55;
}

.i9-fluxo__condicao--vazia:hover circle,
.i9-fluxo__condicao--vazia:hover .i9-fluxo__condicao-mais {
    opacity: 1;
    stroke: var(--i9-accent, #2f6fb8);
}

/* ---- nós ---------------------------------------------------------------- */

.i9-fluxo__no {
    cursor: pointer;
}

.i9-fluxo__caixa {
    fill: var(--i9-card, #fff);
    stroke: var(--i9-line, rgba(20, 50, 95, .18));
    stroke-width: 1;
}

.i9-fluxo__no:hover .i9-fluxo__caixa {
    stroke: var(--i9-accent, #2f6fb8);
    stroke-width: 1.6;
}

/*
    A barra da esquerda diz o papel do nó no fluxo. Verde onde arranca, cinzento
    onde acaba, azul no meio: é a leitura de relance que faz ver que este
    processo abre três frentes ao mesmo tempo.
*/
.i9-fluxo__barra-lateral {
    fill: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__no--inicio .i9-fluxo__barra-lateral {
    fill: var(--i9-ok, #2e9e6b);
}

.i9-fluxo__no--fim .i9-fluxo__barra-lateral {
    fill: var(--i9-muted, #6b7a90);
}

/*
    O desenho do tipo de atividade, à esquerda do nome. Traço fino e cor apagada:
    diz o género da atividade, não é o assunto dela — o assunto é o nome.
*/
.i9-fluxo__icone path {
    fill: none;
    stroke: var(--i9-muted, #6b7a90);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.i9-fluxo__no:hover .i9-fluxo__icone path {
    stroke: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__nome {
    font-size: 13px;
    font-weight: 600;
    fill: var(--i9-ink, #12233d);
}

.i9-fluxo__legenda {
    font-size: 11px;
    fill: var(--i9-muted, #6b7a90);
}

/*
    Quem aprova. Na cor da marca de aprovacao do canto, de proposito: sao a
    mesma informacao vista de duas maneiras — a marca diz que ali se espera, a
    linha diz por quem — e a cor comum liga uma a' outra sem ser preciso legenda.
*/
.i9-fluxo__aprovacao {
    font-size: 11px;
    fill: var(--i9-warn, #d08700);
}

/* ---- marcas do canto ---------------------------------------------------- */

.i9-fluxo__marca circle {
    stroke: none;
}

.i9-fluxo__marca path {
    fill: none;
    stroke: var(--i9-card, #fff);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.i9-fluxo__marca--aprovacao circle {
    fill: var(--i9-warn, #d08700);
}

.i9-fluxo__marca--aprovacao {
    cursor: pointer;
}

/*
    A marca de aprovacao de uma atividade que ainda nao tem aprovadores. So'
    aparece com o rato em cima do no', como os +: e' por onde se cria o
    primeiro, e um circulo laranja em todos os nos dizia que todos esperam por
    alguem, que e' o contrario do que se passa.
*/
.i9-fluxo__marca--vazia {
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.i9-fluxo__no:hover .i9-fluxo__marca--vazia {
    opacity: .45;
}

.i9-fluxo__marca--vazia:hover {
    opacity: 1;
}

/*
    As duas marcas do proprio no' — publica e automatica — sao interruptores e
    nao rotulos: carregar liga e desliga. Por isso ficam a' esquerda, separadas
    das de gente, que abrem janelas. De um lado o que a atividade e', do outro
    quem lhe toca.
*/
.i9-fluxo__marca--automatica,
.i9-fluxo__marca--publica {
    cursor: pointer;
}

.i9-fluxo__marca--automatica circle {
    fill: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__marca--publica circle {
    fill: var(--i9-muted, #6b7a90);
}

.i9-fluxo__marca--publica path {
    fill: var(--i9-card, #fff);
    stroke: none;
}

/*
    A quem a atividade e' entregue. Verde como a barra de arranque: e' o lado de
    quem faz o trabalho, por oposicao ao laranja de quem o aprova.
*/
.i9-fluxo__marca--atribuicao circle {
    fill: var(--i9-ok, #2e9e6b);
}

.i9-fluxo__marca--atribuicao {
    cursor: pointer;
}

.i9-fluxo__marca--atribuicao path {
    stroke-width: 1.4;
}

/* O raio é uma forma cheia, não um traço. */
.i9-fluxo__marca--automatica path,
.i9-fluxo__marca--accao path {
    fill: var(--i9-card, #fff);
    stroke: none;
}

/*
    As ações extra — o que a atividade escreve noutro sítio.

    Roxo, que não é nenhuma das outras famílias: não é o estado da atividade
    (azul e cinzento, à esquerda) nem gente (verde e laranja, à direita). É a
    mesma cor do ícone da entidade.

    Aparecem sempre que existem, e não só com o rato em cima: é informação
    sobre o que a atividade faz, não um gesto disponível. Quem olha para o
    fluxo tem de ver que aquela caixa mexe noutra sem lá ir.
*/
.i9-fluxo__marca--accao {
    cursor: pointer;
}

.i9-fluxo__marca--accao circle {
    fill: var(--i9-roxo, #7c3aed);
}

/* As marcas do fim da caixa: termina com uma decisão, escala quando passa o prazo. */
.i9-fluxo__marca--decisao,
.i9-fluxo__marca--escalada {
    cursor: pointer;
}

.i9-fluxo__marca--decisao circle {
    fill: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__marca--escalada circle {
    fill: var(--i9-erro, #c2410c);
}

/* A etiqueta de uma seta que se segue por uma decisão: mostra a decisão. */
.i9-fluxo__decisao rect {
    fill: var(--i9-accent, #2f6fb8);
    stroke: none;
}

.i9-fluxo__decisao text {
    font-size: 11px;
    font-weight: 600;
    fill: var(--i9-card, #fff);
}

.i9-fluxo__decisao {
    cursor: pointer;
}

/* ---- o + de acrescentar ------------------------------------------------- */

/*
    Só aparece com o rato em cima do nó. Um fluxo com quinze atividades com
    quinze círculos sempre visíveis era ruído, e o gesto que interessa ler à
    primeira é a seta, não o botão.
*/
.i9-fluxo__mais {
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.i9-fluxo__no:hover .i9-fluxo__mais {
    opacity: 1;
}

.i9-fluxo__mais circle {
    fill: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__mais path {
    stroke: var(--i9-card, #fff);
    stroke-width: 2;
    stroke-linecap: round;
}

/*
    O de paralelo distingue-se pela cor, alem da posicao: acrescentar ao lado
    nao cria seta nenhuma, e por isso nao merece o azul das ligacoes.
*/
.i9-fluxo__mais--paralelo circle {
    fill: var(--i9-muted, #6b7a90);
}

/*
    O de desligar e' o unico que tira alguma coisa, e por isso e' o unico
    vermelho. Os outros dois acrescentam.
*/
.i9-fluxo__mais--desligar circle {
    fill: var(--i9-danger, #c4453b);
}

/* ---- modo de ligação ---------------------------------------------------- */

/*
    Enquanto se liga, todos os nós ficam com a moldura tracejada: é o sinal de
    que o clique agora faz outra coisa que não abrir a atividade. Sem isto, o
    modo de ligação era invisível e o primeiro clique parecia uma avaria.
*/
.i9-fluxo__no--a-ligar .i9-fluxo__caixa {
    stroke: var(--i9-accent, #2f6fb8);
    stroke-dasharray: 5 3;
}

.i9-fluxo__no--origem .i9-fluxo__caixa {
    stroke: var(--i9-accent, #2f6fb8);
    stroke-width: 2.5;
    stroke-dasharray: none;
}

/* ---- barra e rodapé ----------------------------------------------------- */

.i9-fluxo__aviso {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--i9-accent, #2f6fb8);
}

.i9-fluxo__rodape,
.i9-fluxo__vazio {
    margin: 0;
    font-size: .8rem;
    color: var(--i9-muted, #6b7a90);
}

/* ---- ícones da barra ---------------------------------------------------- */

/* Mesma mecânica da página inicial: forma na máscara, cor do currentColor. */
.i9-icone-nova,
.i9-icone-expandir,
.i9-icone-encolher,
.i9-icone-ligar,
.i9-icone-recarregar {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Setas para os quatro cantos, e o inverso para voltar. */
.i9-icone-expandir {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M21 9V3h-6M15 21h6v-6M3 15v6h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M21 9V3h-6M15 21h6v-6M3 15v6h6'/%3E%3C/svg%3E");
}

.i9-icone-encolher {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h6V3M21 9h-6V3M15 21v-6h6M9 21v-6H3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h6V3M21 9h-6V3M15 21v-6h6M9 21v-6H3'/%3E%3C/svg%3E");
}

/* Uma caixa com um mais: mais uma atividade no fluxo. */
.i9-icone-nova {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M12 9v6M9 12h6'/%3E%3C/svg%3E");
}

/* Dois elos: o gesto de unir duas atividades. */
.i9-icone-ligar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
}

/* Seta em círculo: voltar a ler o fluxo da base de dados. */
.i9-icone-recarregar {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v4h-4'/%3E%3C/svg%3E");
}

/* ---- execução do processo (ExecucaoDoProcesso.razor) --------------------

    O mesmo desenho, pintado com o estado real. A cor vai na barra lateral e no
    contorno da caixa — o sítio que no construtor diz o papel do nó —, e o que
    ainda não aconteceu fica esbatido: lê-se primeiro o caminho percorrido.
*/
.i9-execucao { --exec-ok: var(--i9-ok, #2e9e6b); --exec-curso: var(--i9-accent, #2f6fb8);
               --exec-atraso: #c62828; --exec-falta: var(--i9-muted, #6b7a90); --exec-nao: #b26a00; }

.i9-execucao__legenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: 12px; }
.i9-execucao__chave { display: inline-flex; align-items: center; gap: .35rem; color: var(--i9-ink, #12233d); }
.i9-execucao__chave i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.i9-execucao__chave--concluida i { background: var(--exec-ok); }
.i9-execucao__chave--em-curso i { background: var(--exec-curso); }
.i9-execucao__chave--atrasada i { background: var(--exec-atraso); }
.i9-execucao__chave--por-executar i { background: transparent; border: 1.5px dashed var(--exec-falta); }
.i9-execucao__chave--nao-executada i { background: var(--exec-nao); }
.i9-execucao__recarregar { margin-left: auto; font-size: 12px; background: none; border: 1px solid var(--i9-line, rgba(20,50,95,.18));
                           border-radius: 6px; padding: .15rem .6rem; cursor: pointer; color: inherit; }

.i9-execucao__situacao { font-size: 11px; font-weight: 600; }
/* Um passo automático que falhou todas as tentativas: o processo está parado nele. */
.i9-execucao__passo--falhou { fill: var(--exec-atraso); font-weight: 600; }

.i9-execucao__no--concluida .i9-fluxo__barra-lateral { fill: var(--exec-ok); }
.i9-execucao__no--concluida .i9-fluxo__caixa { stroke: var(--exec-ok); stroke-width: 1.4; }
.i9-execucao__no--concluida .i9-execucao__situacao { fill: var(--exec-ok); }

.i9-execucao__no--em-curso .i9-fluxo__barra-lateral { fill: var(--exec-curso); }
.i9-execucao__no--em-curso .i9-fluxo__caixa { stroke: var(--exec-curso); stroke-width: 2.2; }
.i9-execucao__no--em-curso .i9-execucao__situacao { fill: var(--exec-curso); }

.i9-execucao__no--atrasada .i9-fluxo__barra-lateral { fill: var(--exec-atraso); }
.i9-execucao__no--atrasada .i9-fluxo__caixa { stroke: var(--exec-atraso); stroke-width: 2.2; fill: #fff5f5; }
.i9-execucao__no--atrasada .i9-execucao__situacao { fill: var(--exec-atraso); }

.i9-execucao__no--nao-executada .i9-fluxo__barra-lateral { fill: var(--exec-nao); }
.i9-execucao__no--nao-executada .i9-execucao__situacao { fill: var(--exec-nao); }

.i9-execucao__no--por-executar { opacity: .55; }
.i9-execucao__no--por-executar .i9-fluxo__barra-lateral { fill: var(--exec-falta); }
.i9-execucao__no--por-executar .i9-fluxo__caixa { stroke-dasharray: 5 4; }
.i9-execucao__no--por-executar .i9-execucao__situacao { fill: var(--exec-falta); font-weight: 400; }

.i9-execucao__no--inerte { cursor: default; }
.i9-execucao__no--inerte:hover .i9-fluxo__caixa { stroke: var(--i9-line, rgba(20, 50, 95, .18)); stroke-width: 1; }

.i9-execucao__seta--percorrida { stroke: var(--exec-ok); stroke-width: 2; }
.i9-execucao__seta--por-percorrer { opacity: .4; }

.i9-execucao__vezes circle { fill: var(--i9-card, #fff); stroke: var(--exec-curso); stroke-width: 1.2; }
.i9-execucao__vezes text { font-size: 10px; font-weight: 600; fill: var(--exec-curso); }

.i9-execucao__fora { font-size: 12px; display: flex; flex-wrap: wrap; gap: .3rem .8rem; }