/*
 * Paleta do modulo LGPD.
 *
 * Uma cor, um significado. Antes o vermelho dizia "dado sensivel", "erro",
 * "exige RIPD" e "excluir" ao mesmo tempo, e o mesmo nivel de risco saia preto
 * numa tela e vermelho na outra. Aqui:
 *
 *   - risco (e gravidade de incidente): semaforo de 4 niveis, do verde ao
 *     vermelho -- baixo, medio, alto, critico;
 *   - dado sensivel: roxo. E uma caracteristica do dado, nao um alarme;
 *   - situacao do RIPD: rascunho, em revisao, requer acao, aprovado, arquivado;
 *   - funil da visao geral: um tom so, do claro ao escuro;
 *   - vermelho do Bootstrap fica para erro, pendencia grave e acao destrutiva.
 *
 * As classes sao aplicadas pelas tags de lgpd/templatetags/lgpd_cores.py ou
 * direto no template (lgpd-risco-{{ nivel }}), sempre com o codigo do nivel.
 */

:root {
    /* As quatro cores da Matriz de Analise Qualitativa de Riscos: B verde,
     * M amarelo, A laranja, E vermelho. Os badges usam as mesmas. */
    --lgpd-risco-low: #3c9f40;
    --lgpd-risco-low-bg: #e6f4ea;
    --lgpd-risco-medium: #f4e04d;
    --lgpd-risco-medium-bg: #fff9d6;
    --lgpd-risco-high: #f5a300;
    --lgpd-risco-high-bg: #ffefcc;
    --lgpd-risco-critical: #e0201b;
    --lgpd-risco-critical-bg: #fbe0de;

    --lgpd-sensivel: #6f42c1;

    --lgpd-status-draft: #6c757d;
    --lgpd-status-review: #1f6fb2;
    --lgpd-status-action_required: #b45309;
    --lgpd-status-approved: #2e7d32;
    --lgpd-status-archived: #343a40;

    --lgpd-funil-1: #a9c1de;
    --lgpd-funil-2: #7ea1cc;
    --lgpd-funil-3: #5582b8;
    --lgpd-funil-4: #34649e;
    --lgpd-funil-5: #1f3a5f;

    /* Cartografia do risco: uma cor por evento temido do metodo PIA. */
    --lgpd-evento-illegitimate_access: #b3261e;
    --lgpd-evento-unwanted_modification: #d9480f;
    --lgpd-evento-data_disappearance: #1f3a5f;
    --lgpd-evento-outro: #6c757d;

    --lgpd-etiqueta-bg: #eef1f5;
    --lgpd-etiqueta-texto: #2b3440;
    --lgpd-etiqueta-borda: #d4dae2;
    --lgpd-etiqueta-remover: #6b7683;
}

/* Risco e gravidade ---------------------------------------------------- */
.badge.lgpd-risco-low { background-color: var(--lgpd-risco-low); color: #fff; }
.badge.lgpd-risco-medium { background-color: var(--lgpd-risco-medium); color: #3a2e00; }
.badge.lgpd-risco-high { background-color: var(--lgpd-risco-high); color: #2b1a00; }
.badge.lgpd-risco-critical { background-color: var(--lgpd-risco-critical); color: #fff; }

/* Fundo claro do mesmo nivel, para quando a cor cheia pesa demais. */
.lgpd-celula-low { background-color: var(--lgpd-risco-low-bg) !important; }
.lgpd-celula-medium { background-color: var(--lgpd-risco-medium-bg) !important; }
.lgpd-celula-high { background-color: var(--lgpd-risco-high-bg) !important; }
.lgpd-celula-critical { background-color: var(--lgpd-risco-critical-bg) !important; }

/* Matriz de Analise Qualitativa de Riscos ------------------------------ */
.lgpd-matriz table { table-layout: fixed; min-width: 520px; }
.lgpd-matriz .lgpd-matriz-eixo {
    background-color: #f1f3f5 !important;
    font-size: .8rem;
    font-weight: 600;
}
.lgpd-matriz thead tr:first-child th:first-child { width: 110px; }
.lgpd-matriz-celula {
    position: relative;
    height: 64px;
    color: #1d1d1d;
    font-weight: 700;
}
.lgpd-matriz-low { background-color: var(--lgpd-risco-low) !important; }
.lgpd-matriz-medium { background-color: var(--lgpd-risco-medium) !important; }
.lgpd-matriz-high { background-color: var(--lgpd-risco-high) !important; }
.lgpd-matriz-critical { background-color: var(--lgpd-risco-critical) !important; }
/* Com riscos na celula, a letra vai para o canto e os riscos ocupam o meio. */
.lgpd-matriz-celula:has(.lgpd-matriz-risco) { padding-top: 1.1rem; }
.lgpd-matriz-celula:has(.lgpd-matriz-risco) .lgpd-matriz-letra {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: .7rem;
    opacity: .75;
}
.lgpd-matriz-risco {
    background-color: rgba(20, 20, 20, .85);
    color: #fff;
    margin-bottom: 2px;
    font-weight: 500;
}
.lgpd-matriz-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    align-items: center;
    margin-top: .5rem;
}
.lgpd-matriz-chip {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0 .35rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .2rem;
    text-align: center;
    font-weight: 700;
    color: #1d1d1d;
}
/* No formulario, a matriz e o seletor de consequencia e probabilidade. */
.lgpd-matriz-seletor .lgpd-matriz-celula { cursor: pointer; height: 44px; }
.lgpd-matriz-seletor .lgpd-matriz-celula:hover,
.lgpd-matriz-seletor .lgpd-matriz-celula:focus { filter: brightness(.92); outline: none; }
.lgpd-matriz-seletor .lgpd-matriz-celula.selecionada {
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #1d1d1d;
}
.lgpd-matriz-seletor .lgpd-matriz-celula.bloqueada { opacity: .3; cursor: not-allowed; }

/* Dado sensivel -------------------------------------------------------- */
.badge.lgpd-sensivel { background-color: var(--lgpd-sensivel); color: #fff; }

/* Situacao do RIPD ----------------------------------------------------- */
.badge.lgpd-status-draft { background-color: var(--lgpd-status-draft); color: #fff; }
.badge.lgpd-status-review { background-color: var(--lgpd-status-review); color: #fff; }
.badge.lgpd-status-action_required { background-color: var(--lgpd-status-action_required); color: #fff; }
.badge.lgpd-status-approved { background-color: var(--lgpd-status-approved); color: #fff; }
.badge.lgpd-status-archived { background-color: var(--lgpd-status-archived); color: #fff; }

/* Funil da visao geral ------------------------------------------------- */
.progress-bar.lgpd-funil-1 { background-color: var(--lgpd-funil-1); }
.progress-bar.lgpd-funil-2 { background-color: var(--lgpd-funil-2); }
.progress-bar.lgpd-funil-3 { background-color: var(--lgpd-funil-3); }
.progress-bar.lgpd-funil-4 { background-color: var(--lgpd-funil-4); }
.progress-bar.lgpd-funil-5 { background-color: var(--lgpd-funil-5); }

/* Cartoes de itens: riscos, ameacas, medidas, acoes... ------------------ */
/* Um item por linha, na largura toda: o texto de cada risco se le de uma vez,
 * sem a coluna estreita que quebrava titulo e etiquetas. */
.lgpd-cartoes {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.lgpd-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid #d5dce4;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(16, 36, 62, .06);
}
.lgpd-cartao:hover { box-shadow: 0 .25rem .75rem rgba(16, 36, 62, .10); }
/* A barra de cima e a de uma janela: titulo a esquerda, X no canto direito. */
.lgpd-cartao-topo {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.4rem;
    padding: .2rem .2rem .2rem .85rem;
    background: #f4f6f9;
    border-bottom: 1px solid #e3e8ee;
    border-radius: .5rem .5rem 0 0;
}
.lgpd-cartao-titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--sidebar-bg, #10243e);
    text-decoration: none;
}
a.lgpd-cartao-titulo:hover { text-decoration: underline; }
.lgpd-cartao-fechar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 1.9rem;
    border-radius: .35rem;
    color: #5a6b7c;
    text-decoration: none;
}
/* O vermelho do fechar das janelas: so aparece quando o mouse chega nele. */
.lgpd-cartao-fechar:hover,
.lgpd-cartao-fechar:focus-visible { background: #c42b1c; color: #fff; outline: none; }
.lgpd-cartao-corpo { flex: 1 1 auto; padding: .75rem .85rem; font-size: .9rem; }
.lgpd-cartao-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .5rem .85rem;
    border-top: 1px solid #eef1f5;
}
.lgpd-cartao-acoes { display: flex; gap: .35rem; margin-left: auto; }
/* Compacto: para itens com pouco a mostrar (ameacas, medidas). Titulo,
 * etiquetas, Editar e X numa barra so; a descricao, se houver, embaixo. */
.lgpd-cartao-compacto .lgpd-cartao-topo { flex-wrap: wrap; padding-block: .3rem; }
.lgpd-cartao-compacto .lgpd-cartao-topo:last-child { border-bottom: 0; border-radius: .5rem; }
.lgpd-cartao-compacto .lgpd-cartao-titulo { flex: 0 1 auto; }
.lgpd-cartao-compacto .lgpd-cartao-corpo { padding: .4rem .85rem; }
.lgpd-cartao-etiquetas { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.lgpd-cartao-editar { margin-left: auto; padding-block: .1rem; }
/* O cartao do +: uma faixa fina e tracejada no topo da lista -- um fantasma,
 * para nao se confundir com um item de verdade. */
.lgpd-cartao-novo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
    padding: .45rem .85rem;
    border: 2px dashed #b8c4d1;
    border-radius: .5rem;
    color: #5a6b7c;
    text-decoration: none;
}
.lgpd-cartao-novo:hover,
.lgpd-cartao-novo:focus-visible {
    border-color: var(--sidebar-bg-active, #0d6efd);
    color: var(--sidebar-bg-active, #0d6efd);
    background: #f4f8ff;
}
.lgpd-cartao-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: .8rem;
}

/* Secao simples: titulo e conteudo, sem a faixa escura de janela. Para o que
 * fica sempre aberto e lado a lado, como a conformidade legal do RIPD. */
.lgpd-secao { display: flex; flex-direction: column; }
.lgpd-secao-titulo {
    color: var(--sidebar-bg, #10243e);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #cfd8e3;
}
.lgpd-secao-corpo {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid #d5dce4;
    border-radius: .5rem;
    overflow: hidden;
}

/* Pendencias: o vermelho e so do que a pessoa ainda nao leu. ------------ */
.lgpd-ponto-novo {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #dc3545;
}
tr.lgpd-pendencia-nova > td { background-color: #fff5f5; }
tr.lgpd-pendencia-nova .lgpd-pendencia-titulo { font-weight: 700; }
.lgpd-pendencia-titulo { font-weight: 500; }

/* Etiquetas das caixas de escolha multipla (select2). Eram as mesmas tres
 * cores copiadas em tres formularios. Tom discreto: o azul cheio cansava a
 * vista com varias escolhidas. */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--lgpd-etiqueta-bg);
    color: var(--lgpd-etiqueta-texto);
    border: 1px solid var(--lgpd-etiqueta-borda);
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--lgpd-etiqueta-remover);
}