/*
Estilos específicos do mini app de ocorrências, construídos sobre
design-tokens.css (carregar depois dele). Não redefine tokens — só compõe
componentes (cards, formulário, blocos de criticidade) com as classes e
variáveis do design system.
*/

/*
=====================================================
Blocos de criticidade
=====================================================
Usam .primary-background (card de vidro) como base — a cor por nível de
risco não é o preenchimento do card (isso quebraria a legibilidade em tema
claro/escuro), e sim uma borda de destaque. A cor em si é dado — o campo
NivelRisco.cor, editável pelo gestor —, não um token fixo daqui; a régua
semeada segue a rampa ordinal do design system (pior → melhor: danger,
warning, info, marca), ver "Ordinal/severity data" em chart-palette.md.
*/

/* A borda é NivelRisco.cor, servida como `--cor-nivel` no style do card. Antes
   eram quatro seletores [data-peso="10|5|3|1"]: além de ignorarem o banco, um
   nível com peso fora desse conjunto (o formulário aceita qualquer um) não
   casava seletor nenhum e o card perdia a cor sem aviso. O fallback cobre o
   nível cuja cor ainda não foi preenchida. */
.bloco-criticidade {
    border-left: 4px solid var(--cor-nivel, var(--border-color));
}

.bloco-criticidade .situacao[data-situacao="nc"] { color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 15%, transparent); }
.bloco-criticidade .situacao[data-situacao="em_rota"] { color: var(--warning-color); background: color-mix(in srgb, var(--warning-color) 15%, transparent); }
.bloco-criticidade .situacao[data-situacao="sob_controle"] { color: var(--primary-btn-color); background: color-mix(in srgb, var(--primary-btn-color) 15%, transparent); }

/* Status de tratamento da NC — mesma mecânica de atributo dos blocos de
   criticidade acima, reusando o componente .status-badge do design system.
   Vermelho para o que exige ação (NC ainda não aberta) e o verde da marca
   para o que já foi tratado: a leitura é "pendência → resolvido", não uma
   escala de gravidade. */
.status-badge[data-status-nc="a_abrir"] { color: var(--danger-color); background: color-mix(in srgb, var(--danger-color) 15%, transparent); }
.status-badge[data-status-nc="aberta"]  { color: var(--primary-btn-color); background: color-mix(in srgb, var(--primary-btn-color) 15%, transparent); }

/*
=====================================================
Filtros do painel
=====================================================
O design system descreve esses componentes como "sidebar filters", mas
aqui os filtros são específicos da página do painel (o sidebar do app é
a navegação global) — mesma aparência, lugar diferente.
*/

.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.filtros label {
    display: flex;
    flex-direction: column;
    flex: 1 1 140px;
    gap: var(--space-1);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--no-contrast-font-color);
}

.filtros .filter-input,
.filtros .filter-select {
    width: 100%;
    height: var(--btn-input-height);
}

.filtros .filter-checkbox {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
}

.filtros .filter-checkbox input {
    accent-color: var(--primary-btn-color);
}

.filtros .btn-filter-apply {
    flex: 1 1 140px;
    height: var(--btn-input-height);
}

@media (max-width: 480px) {
    .filtros label,
    .filtros .btn-filter-apply {
        flex-basis: 100%;
    }
}

/*
=====================================================
Formulário de lançamento
=====================================================
*/

/* Empilhamento rótulo-em-cima-do-campo. O `:not(.form-actions)` existe
   porque este seletor (classe + elemento) vence `.form-actions` (só
   classe) na especificidade: sem ele, uma linha de botões marcada como
   .form-actions herdava `flex-direction: column` daqui e os botões
   empilhavam verticalmente em vez de dividirem a linha. */
.forms-container p:not(.form-actions) {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.forms-container label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--no-contrast-font-color);
}

/* Campo booleano não segue o empilhamento "rótulo em cima": o controle é
   pequeno e fica solto numa coluna própria. Vira uma linha "[x] Rótulo"
   (o Django emite <label> antes do <input>, daí o `order`), com o help_text
   quebrando para a linha de baixo em vez de disputar espaço na horizontal. */
.forms-container p:has(input[type="checkbox"]) {
    flex-flow: row wrap;
    align-items: center;
    gap: var(--space-2);
}

.forms-container p:has(input[type="checkbox"]) input[type="checkbox"] {
    order: -1;
}

.forms-container p:has(input[type="checkbox"]) .helptext {
    flex-basis: 100%;
}

.forms-container textarea {
    min-height: 80px;
}

.forms-container ul.errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--error-text-color);
    font-size: 12px;
}

/* Django's default field help text (e.g. UserCreationForm's password rules)
   renders as a bare <span class="helptext"> with no class of its own to
   style — it inherits the page's base font-size/weight, so it reads as
   loud as the actual input value instead of a quiet hint. Deliberately
   smaller/lighter than the label above it, never bold. */
.forms-container .helptext {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--no-contrast-font-color);
}

.forms-container .helptext ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}

.forms-container .helptext li {
    margin-bottom: 2px;
}


/*
=====================================================
Login
=====================================================
*/

.login-form p {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    text-align: left;
}

.login-form label {
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    color: var(--no-contrast-font-color);
}

/* O .login-card é centralizado (é o que alinha logo e título), e `.login-form p`
   desfaz isso para as linhas de campo. Mas o help_text do Django às vezes
   escapa do <p> — ver `simplificar_ajuda_de_senha` — e voltaria a herdar o
   centro. Alinhar o form inteiro à esquerda cobre os dois casos. */
.login-form {
    text-align: left;
}

/* Mesmo tratamento que .forms-container .helptext: a dica tem que ler mais
   baixo que o label acima dela, nunca maior que o texto do campo. O seletor
   solto (sem depender de .helptext) alcança também o caso em que a lista
   escapou do span. */
.login-form .helptext,
.login-form ul {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--no-contrast-font-color);
    text-align: left;
}

.login-form ul {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
}

/* A lista de erros do Django também escapa do <p> (mesmo motivo do help_text),
   e sem esta regra herdaria o cinza de dica acima — erro precisa ler como erro.
   Espelha `.forms-container ul.errorlist`. */
.login-form ul.errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-1);
    color: var(--error-text-color);
    font-size: 12px;
}

/* Parágrafos explicativos do card (o "informe o e-mail…" das telas de senha)
   ficam centralizados junto com o título; só as linhas de campo é que não. */
.login-card > p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--no-contrast-font-color);
    text-align: center;
}

/*
=====================================================
Mensagens (Django messages framework)
=====================================================
*/

.messages {
    list-style: none;
    padding: 0;
}

.messages li {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--btn-border-radius);
    margin-bottom: var(--space-2);
}

.messages li.error {
    color: var(--error-text-color);
}

/*
=====================================================
Amostra de cor (tabela de níveis de risco)
=====================================================
O hex sozinho não diz nada a quem lê a tabela — a amostra é o que torna a
coluna conferível de relance. `aria-hidden` no span: o valor já está escrito
ao lado em texto, e um quadrado colorido não acrescenta nada ao leitor de
tela.
*/

.cor-amostra {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    vertical-align: -2px;
    margin-right: var(--space-2);
}

/*
=====================================================
Linhas expansíveis (drill-down)
=====================================================
Vale para a tabela de NC pendentes do dashboard e para a de desvios por
colaborador: cada item vira DUAS <tr>, a de dados e a de detalhe. Isso quebra
o zebrado de `tbody tr:nth-child(even)` (as linhas de dados passam a ser todas
ímpares e nenhuma recebe o banding), então aqui a faixa é desligada e
recalculada, e o detalhe ganha fundo próprio — ele é um bloco aninhado, não
mais uma linha da mesma lista.
*/

/* `>` e não descendente: a tabela do detalhe mora dentro da expansível, e com
   seletor solto ela herdaria esta contagem — que só faz sentido para linhas
   intercaladas. Aninhada, ela fica com o zebrado normal do design system. */
.tabela-expansivel > tbody > tr:nth-child(even) {
    background: none;
}

/* Com o detalhe intercalado, as linhas de dados ficam nas posições ímpares
   (1, 3, 5…): é o 4n+1 que devolve o alternado de uma linha sim, uma não. */
.tabela-expansivel > tbody > tr:nth-child(4n + 1) {
    background: color-mix(in srgb, var(--primary-font-color) 3%, transparent);
}

/* A coluna do botão encolhe até ele, como a .col-actions das listagens. */
.col-expand {
    width: 1%;
    white-space: nowrap;
}

.linha-detalhe:hover {
    background: none;
}

/* `tbody td:last-child` é alinhado à direita para emoldurar a linha; a célula
   do detalhe é primeira E última ao mesmo tempo e cairia nessa regra. */
.linha-detalhe > td {
    padding: 0 var(--space-4) var(--space-4);
    text-align: left;
}

.tabela-detalhe {
    margin-top: var(--space-2);
    background: color-mix(in srgb, var(--primary-font-color) 3%, transparent);
    border-radius: var(--btn-border-radius);
    overflow: hidden;
}

.tabela-detalhe thead th {
    padding: var(--space-2) var(--space-3);
}

.tabela-detalhe tbody td {
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
}

.detalhe-vazio {
    padding: var(--space-3) 0;
    font-size: 13px;
    color: var(--no-contrast-font-color);
}

.detalhe-link {
    display: inline-block;
    margin-top: var(--space-2);
    font-size: 12px;
}