/* ====================================
   CAMADA DO PRODUTO SOBRE A DIRECAO A (guia-v1.0; valores e botoes de nivel na guia-v1.1)
   Utilitarios do Bootstrap com cor fixa, que o guia nao cobre, acompanham o tema.
   ==================================== */

.tn-a { --bs-code-color: var(--tn-ink); }

/* Niveis de texto do guia tambem nas telas que nao carregam style.css. */
.tn-a .text-success { color: var(--tn-ok) !important; }
.tn-a .text-warning { color: var(--tn-warn) !important; }
.tn-a .text-danger { color: var(--tn-crit) !important; }
.tn-a .text-info { color: var(--tn-info) !important; }

/* Fundo claro fixo e texto escuro fixo: ilegiveis no tema escuro. */
.tn-a .bg-light { background-color: var(--tn-surface-soft) !important; }
.tn-a .bg-dark { background-color: var(--tn-surface-soft) !important; color: var(--tn-ink) !important; }
.tn-a .text-dark { color: var(--tn-ink) !important; }
.tn-a .text-secondary { color: var(--tn-muted) !important; }
.tn-a .text-light { color: var(--tn-ink) !important; }
.tn-a .border-success { border-color: var(--tn-ok) !important; }
.tn-a .border-warning { border-color: var(--tn-warn) !important; }
.tn-a .border-danger { border-color: var(--tn-crit) !important; }
.tn-a .border-info { border-color: var(--tn-info) !important; }
.tn-a .border-secondary { border-color: var(--tn-idle) !important; }
/* Cartao com faixa de nivel: so a borda esquerda leva a cor. */
.tn-a .card.border-start.border-4 { border-width: 1px 1px 1px 4px !important; border-top-color: var(--tn-line) !important; border-right-color: var(--tn-line) !important; border-bottom-color: var(--tn-line) !important; }

/* Niveis em selo, cabecalho e cartao: fundo suave + texto do nivel, como .alert-* no guia.
   A cor nunca fica sozinha: o texto do selo continua dizendo a situacao. */
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-success,
.tn-a .text-bg-success { background-color: var(--tn-ok-soft) !important; color: var(--tn-ok) !important; }
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-warning,
.tn-a .text-bg-warning { background-color: var(--tn-warn-soft) !important; color: var(--tn-warn) !important; }
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-danger,
.tn-a .text-bg-danger { background-color: var(--tn-crit-soft) !important; color: var(--tn-crit) !important; }
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-info,
.tn-a .text-bg-info { background-color: var(--tn-info-soft) !important; color: var(--tn-info) !important; }
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-secondary,
.tn-a .text-bg-secondary { background-color: var(--tn-idle-soft) !important; color: var(--tn-idle) !important; }
.tn-a :is(.badge, .card, .card-header, .modal-header, .toast-header, .rounded).bg-primary,
.tn-a .text-bg-primary { background-color: var(--tn-action-soft) !important; color: var(--tn-action) !important; }
.tn-a :is(.badge).bg-light,
.tn-a .text-bg-light,
.tn-a .text-bg-dark { background-color: var(--tn-surface-soft) !important; color: var(--tn-ink) !important; }
.tn-a .bg-primary-subtle { background-color: var(--tn-action-soft) !important; }

/* Nivel mais destacado da tela: critico cheio, acima do fundo suave dos demais niveis. */
.tn-a .tn-nivel-critico,
.tn-a .card.tn-nivel-critico { --bs-card-color: var(--tn-surface); background-color: var(--tn-crit) !important; color: var(--tn-surface) !important; }

/* Dentro dos cartoes de nivel, o texto branco herda o texto do nivel. */
.tn-a .card[class*="bg-"] :is(.text-white, .text-white-50, .text-dark),
.tn-a .card-header[class*="bg-"] :is(.text-white, .text-white-50, .text-dark),
.tn-a .modal-header[class*="bg-"] :is(.text-white, .text-white-50, .text-dark) { color: inherit !important; }

/* Fechar janela segue o tema, mesmo marcado como branco num cabecalho que nao e mais escuro. */
.tn-a .btn-close-white { filter: none; }
[data-bs-theme="dark"] .tn-a .btn-close-white { filter: var(--bs-btn-close-white-filter); }

/* Linhas de nivel em tabela (.table-*): o Bootstrap fixa fundo claro nos dois temas. */
.tn-a .table-success { --bs-table-bg: var(--tn-ok-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-ok-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-ok-soft); --bs-table-hover-color: var(--tn-ink); }
.tn-a .table-warning { --bs-table-bg: var(--tn-warn-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-warn-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-warn-soft); --bs-table-hover-color: var(--tn-ink); }
.tn-a .table-danger { --bs-table-bg: var(--tn-crit-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-crit-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-crit-soft); --bs-table-hover-color: var(--tn-ink); }
.tn-a .table-info { --bs-table-bg: var(--tn-info-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-info-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-info-soft); --bs-table-hover-color: var(--tn-ink); }
.tn-a .table-primary { --bs-table-bg: var(--tn-action-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-action-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-action-soft); --bs-table-hover-color: var(--tn-ink); }
.tn-a .table-secondary,
.tn-a .table-dark { --bs-table-bg: var(--tn-surface-soft); --bs-table-color: var(--tn-ink); --bs-table-border-color: var(--tn-line); --bs-table-striped-bg: var(--tn-surface-soft); --bs-table-striped-color: var(--tn-ink); --bs-table-hover-bg: var(--tn-surface-soft); --bs-table-hover-color: var(--tn-ink); }

/* Azul fixo do Bootstrap em componentes fora da tabela de correspondencia. */
.tn-a .nav-pills { --bs-nav-pills-link-active-bg: var(--tn-button-primary-bg); --bs-nav-pills-link-active-color: var(--tn-button-primary-ink); --bs-nav-link-color: var(--tn-ink-2); --bs-nav-link-hover-color: var(--tn-ink); }
.tn-a .pagination { --bs-pagination-active-bg: var(--tn-button-primary-bg); --bs-pagination-active-border-color: var(--tn-button-primary-border); --bs-pagination-active-color: var(--tn-button-primary-ink); --bs-pagination-bg: var(--tn-surface); --bs-pagination-border-color: var(--tn-line); --bs-pagination-hover-bg: var(--tn-surface-soft); --bs-pagination-hover-border-color: var(--tn-line); --bs-pagination-disabled-bg: var(--tn-surface-soft); --bs-pagination-disabled-border-color: var(--tn-line); --bs-pagination-disabled-color: var(--tn-muted); }
.tn-a .progress { --bs-progress-bg: var(--tn-line); --bs-progress-bar-bg: var(--tn-action); --bs-progress-bar-color: var(--tn-on-action); }
.tn-a .dropdown-menu { --bs-dropdown-bg: var(--tn-surface); --bs-dropdown-color: var(--tn-ink); --bs-dropdown-border-color: var(--tn-line); --bs-dropdown-link-color: var(--tn-ink); --bs-dropdown-link-hover-color: var(--tn-ink); --bs-dropdown-link-hover-bg: var(--tn-surface-soft); --bs-dropdown-link-active-bg: var(--tn-surface-soft); --bs-dropdown-link-active-color: var(--tn-ink); --bs-dropdown-divider-bg: var(--tn-line); }
.tn-a .list-group { --bs-list-group-bg: var(--tn-surface); --bs-list-group-color: var(--tn-ink); --bs-list-group-border-color: var(--tn-line); --bs-list-group-action-hover-bg: var(--tn-surface-soft); --bs-list-group-action-hover-color: var(--tn-ink); --bs-list-group-active-bg: var(--tn-action-soft); --bs-list-group-active-color: var(--tn-action); --bs-list-group-active-border-color: var(--tn-action-border); }
.tn-a .accordion { --bs-accordion-bg: var(--tn-surface); --bs-accordion-color: var(--tn-ink); --bs-accordion-border-color: var(--tn-line); --bs-accordion-btn-color: var(--tn-ink); --bs-accordion-active-bg: var(--tn-surface-soft); --bs-accordion-active-color: var(--tn-ink); }
.tn-a .input-group-text { background-color: var(--tn-surface-soft); color: var(--tn-ink-2); border-color: var(--tn-control-border); }

/* Link em forma de botao continua link; o guia nao o trata como acao secundaria (fica Bootstrap, D6). */
.tn-a .btn.btn-link { --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--tn-link); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--tn-action-hover); --bs-btn-active-bg: transparent; --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--tn-action-hover); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: var(--tn-muted); }

/* Contorno de nivel selecionado fica preenchido (guia): o .btn do guia cobriria o estado selecionado do Bootstrap. */
.tn-a .btn.active:is(.btn-outline-warning, .btn-outline-info, .btn-outline-success, .btn-outline-danger):not(:disabled, .disabled, fieldset:disabled *),
.tn-a .btn-check:checked:not(:disabled) + .btn:is(.btn-outline-warning, .btn-outline-info, .btn-outline-success, .btn-outline-danger):not(.disabled, fieldset:disabled *) { background-color: var(--bs-btn-active-bg); color: var(--bs-btn-active-color); border-color: var(--bs-btn-active-border-color); }

/* Caixa marcada com aspecto de botao: o sinal diz que esta ligada, alem da cor. Radio fica de fora.
   O preenchimento cede o lugar do sinal (12 px, mais 4 de distancia): o botao nao alarga, o grupo nao quebra de linha e nada se mexe ao clicar. */
.tn-a input[type="checkbox"].btn-check:checked + .btn { padding-inline: 6px; }
.tn-a input[type="checkbox"].btn-check:checked + .btn::before { content: "\2713"; content: "\2713" / ""; flex: none; inline-size: 12px; margin-inline-end: -4px; text-align: center; }

/* Com o botao do guia, os quatro de severidade nao cabem num terco da linha de 768 a 875 px e cobriam o campo Tipo.
   A coluna deles cresce ate caber e as vizinhas cedem o espaco; onde ja cabem, nada muda. De 1200 px para cima a regra nem vale. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .tn-a .row:has(> * > .btn-group > #sevAlto) { flex-wrap: nowrap; }
  .tn-a .row:has(> * > .btn-group > #sevAlto) > * { flex-shrink: 1; min-width: 0; }
  .tn-a .row > :has(> .btn-group > #sevAlto) { flex-shrink: 0; min-width: min-content; }
}

/* Indisponivel fica neutro (guia). O guia so trata :disabled: a classe .disabled, o fieldset desabilitado e o filtro marcavel desabilitado ficariam na cor de nivel.
   Sem a transparencia do Bootstrap, para valer o par medido no guia. */
.tn-a .btn:is(.btn-warning, .btn-info, .btn-success, .btn-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-success, .btn-outline-danger) { --bs-btn-disabled-opacity: 1; }
.tn-a .btn:is(.btn-warning, .btn-info, .btn-success, .btn-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-success, .btn-outline-danger):is(.disabled, fieldset:disabled *, .btn-check:disabled + *) { background-color: var(--bs-btn-disabled-bg); color: var(--bs-btn-disabled-color); border-color: var(--bs-btn-disabled-border-color); opacity: var(--bs-btn-disabled-opacity); }

/* Excluir longe de Salvar: acao frequente e acao que apaga nao ficam coladas. */
.tn-a .vs-excluir { margin-inline-start: 8px; }

/* Botao com 44 px e sem quebra de linha (guia) nao cabe nas barras antigas do celular: as acoes descem de linha, sem rolagem lateral. */
.tn-a .card { min-width: 0; }
.tn-a canvas { max-width: 100%; }
@media (max-width: 575.98px) {
  .tn-a .d-flex.justify-content-between { flex-wrap: wrap; gap: 12px; }
  .tn-a .btn-toolbar, .tn-a .btn-group { flex-wrap: wrap; }
  .tn-a .d-flex:not(.flex-nowrap):has(> .btn, > .input-group) { flex-wrap: wrap; }
  .tn-a .input-group { max-width: 100%; min-width: 0; }
  .tn-a .d-flex > .input-group { flex-basis: 100%; }
  .tn-a label.btn { white-space: normal; }

  /* Campo de data no celular: um abaixo do outro, para o valor aparecer inteiro (formularios.md). */
  .tn-a .row:has(> [class*="col-"] > :is(input[type="date"], input[type="datetime-local"])) > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
  .tn-a .row:has(> [class*="col-"] > :is(input[type="date"], input[type="datetime-local"])) > [class*="col-"]:has(> .btn) { flex: 1 1 0; width: auto; }
  .tn-a .input-group:has(> input[type="date"]) { row-gap: 8px; }
  .tn-a .input-group:has(> input[type="date"]) > .input-group-text { flex: 0 0 44px; justify-content: center; margin-left: 0 !important; border-radius: var(--tn-radius) 0 0 var(--tn-radius) !important; }
  .tn-a .input-group:has(> input[type="date"]) > input[type="date"] { flex: 1 1 calc(100% - 44px); border-radius: 0 var(--tn-radius) var(--tn-radius) 0 !important; }
}

/* Campo de data nunca mais estreito que o valor, em qualquer largura: quem nao couber desce de linha.
   Larguras para 00/00/0000 com o preenchimento, a borda e o seletor nativo, na letra de cada faixa (bootstrap-a.css). */
.tn-a { --dash-data: 121px; --dash-data-sm: 113px; }
@media (max-width: 760px) { .tn-a { --dash-data: 138px; --dash-data-sm: 130px; } }
.tn-a input[type="date"] { min-width: var(--dash-data); }
.tn-a input[type="date"].form-control-sm { min-width: var(--dash-data-sm); }
.tn-a [class*="col-"]:has(> input[type="date"]:not(.form-control-sm)) { min-width: calc(var(--dash-data) + var(--bs-gutter-x, 1.5rem)); }
@media (max-width: 767.98px) {
  .tn-a [class*="col-"]:has(> input[type="date"].form-control-sm) { min-width: calc(var(--dash-data-sm) + var(--bs-gutter-x, 1.5rem)); }
}
@media (min-width: 576px) {
  .tn-a .input-group:has(> input[type="date"]) { flex-wrap: nowrap; }
  .tn-a .d-flex:has(.input-group > input[type="date"]) { flex-wrap: wrap; }
}

/* Dashboard: abaixo de 1366 px, botoes de periodo, busca e datas nao cabem na mesma linha. As datas descem, sem cobrir nada. */
@media (min-width: 768px) and (max-width: 1365.98px) {
  .tn-a .row:has(> #dateFiltersContainer) > [class*="col-"] { flex: 1 1 auto; width: auto; }
  .tn-a .row > #dateFiltersContainer { flex-basis: 100%; }
}

/* Endereco e codigo longos quebram em vez de sair do cartao. */
.tn-a code { overflow-wrap: anywhere; }

/* Indicadores nativos ficam Bootstrap (correspondencia.md): o desenho de "visto" do guia e so da caixa de marcar. */
.tn-a .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
[data-bs-theme=dark] .tn-a .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23102a49'/%3E%3C/svg%3E"); }
.tn-a .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E"); }
[data-bs-theme=dark] .tn-a .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23102a49'/%3E%3C/svg%3E"); }