/*
    A lista de quem entra na atividade — atribuição, redefinição, aprovação.

    Ficheiro próprio e não dentro da fluxo.css: o componente é usado no diagrama
    e também na forma da atividade, e juntá-los fazia com que tirar o diagrama
    levasse a lista atrás.

    As cores vêm das variáveis --i9-* da skin.css, com fallback no var().
*/

/*
    Os tamanhos de letra deste componente alinham todos por 0.75rem, que sao os
    12px da etiqueta da DxCheckBox — a unica que nao controlo. Tinha aqui tres
    tamanhos no mesmo bloco (12, 12.8 e 13.6) e via-se: o olho apanha a
    diferenca antes de ler as palavras.

    A diferenca de *cor* fica: cinzento para rotulos e ajuda, tinta para as
    opcoes. Essa e' significado, nao e' desleixo.
*/

.i9-intervenientes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ---- como se avisa ------------------------------------------------------ */

/*
    As caixas do aviso numa linha só, antes da lista. Estavam no separador da
    forma, longe daquilo a que dizem respeito — e uma delas decidia se a lista
    sequer era lida, o que ninguém adivinhava de dois ecrãs de distância.
*/
.i9-intervenientes__avisos {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: center;
}

.i9-intervenientes__rotulo {
    font-size: .75rem;
    color: var(--i9-muted, #6b7a90);
}

/*
    O envelope e o sino ao lado das palavras. A caixa sozinha obriga a ler
    "email" e "sino" para saber o que faz; com o simbolo apanha-se de relance, e
    sao dois canais que aparecem repetidos em tres blocos.
*/
.i9-icone-email,
.i9-icone-sino {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: .3rem;
    vertical-align: -2px;
    background-color: currentColor;
    opacity: .7;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.i9-icone-email {
    -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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%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%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}

.i9-icone-sino {
    -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='M18 16V11a6 6 0 1 0-12 0v5l-2 3h16z'/%3E%3Cpath d='M10 21a2 2 0 0 0 4 0'/%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='M18 16V11a6 6 0 1 0-12 0v5l-2 3h16z'/%3E%3Cpath d='M10 21a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

/* ---- a linha de acrescentar -------------------------------------------- */

/*
    Escolher o papel e depois quem, lado a lado. É a ordem em que se pensa —
    "quero uma função... a Direção" — e é a que faz a segunda lista saber o que
    há-de mostrar.
*/
.i9-intervenientes__acrescentar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.i9-intervenientes__papel {
    flex: 0 0 auto;
    min-width: 150px;
}

.i9-intervenientes__quem {
    flex: 1 1 220px;
    min-width: 180px;
}

/* ---- a tabela ----------------------------------------------------------- */

.i9-intervenientes__tabela {
    width: 100%;
    border-collapse: collapse;
}

.i9-intervenientes__tabela th {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--i9-line, rgba(20, 50, 95, .18));
    font-size: .75rem;
    font-weight: 600;
    color: var(--i9-muted, #6b7a90);
    text-align: left;
}

.i9-intervenientes__tabela td {
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--i9-line, rgba(20, 50, 95, .08));
    vertical-align: middle;
}

/* A ordem é um número de um ou dois dígitos; não precisa de mais. */
.i9-intervenientes__ordem {
    width: 5.5rem;
}

.i9-intervenientes__numero {
    width: 5rem;
}

.i9-intervenientes__nome {
    font-weight: 600;
    color: var(--i9-ink, #12233d);
}

/*
    O título por que alguém entra — utilizador, função, departamento, equipa — é
    o que antes decidia em qual das quatro grelhas se escrevia. Aqui é uma
    coluna, e em tom apagado: interessa para desempatar nomes iguais, não é o
    assunto da linha.
*/
.i9-intervenientes__tipo {
    width: 8rem;
    font-size: .75rem;
    color: var(--i9-muted, #6b7a90);
}

.i9-intervenientes__accoes {
    width: 2.5rem;
    text-align: right;
}

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

/* ---- ícone -------------------------------------------------------------- */

/* Mesma mecânica do resto da casa: forma na máscara, cor do currentColor. */
.i9-icone-remover {
    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;
    -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='M5 7h14M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%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='M5 7h14M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
}