/* ============================================================
   bs5-compat.css — Ponte de compatibilidade Bootstrap 4 -> 5
   ------------------------------------------------------------
   Carregado DEPOIS de theme.css (ver base.html). Objetivo: travar a
   FIDELIDADE VISUAL de produção (BS4) quando o core for trocado para o
   BS5, sem depender de caçar cada utilitário/componente depois do flip.

   ENQUANTO O BS4 ESTIVER ATIVO, este arquivo é praticamente NO-OP:
   - as vars --bs-* não são lidas pelo BS4 (só pelo BS5);
   - .form-group{margin-bottom:1rem} é idêntico ao que o core BS4 já dá;
   - .form-select não existe no markup BS4 (matchou nada até o flip).

   Referência completa: docs/bootstrap5-migration/BASELINE-CSS-PRODUCAO.md
   ============================================================ */

/* ===================== M1 — VARS --bs-* (paleta/tipografia BS4) =====================
   O BS5 deriva .text-*, .bg-*, .text-muted, .text-bg-*, .form-control e .form-select
   destas custom properties. Travá-las nos valores do BS4 restaura a paleta de produção
   de uma só vez (primary #007bff, success #28a745, info #17a2b8, dark #343a40,
   text-muted #6c757d) em vez do azul/verde/ciano mais saturados do BS5. */
:root{
  --bs-primary:#007bff;
  --bs-primary-rgb:0,123,255;
  --bs-secondary:#6c757d;
  --bs-secondary-rgb:108,117,125;
  --bs-success:#28a745;
  --bs-success-rgb:40,167,69;
  --bs-info:#17a2b8;
  --bs-info-rgb:23,162,184;
  --bs-warning:#ffc107;
  --bs-warning-rgb:255,193,7;
  --bs-danger:#dc3545;
  --bs-danger-rgb:220,53,69;
  --bs-light:#f8f9fa;
  --bs-light-rgb:248,249,250;
  --bs-dark:#343a40;
  --bs-dark-rgb:52,58,64;

  /* .text-muted volta de rgba(33,37,41,.75) do BS5 para o cinza neutro #6c757d do BS4 */
  --bs-secondary-color:#6c757d;

  /* bordas/cantos de inputs e do core no padrão BS4 (theme.css ainda domina cards/btns/inputs) */
  --bs-border-color:#ced4da;
  --bs-border-radius:.25rem;

  /* tipografia base = Datta (a fonte global é 12px; a de formulário é 14px, ver abaixo) */
  --bs-body-font-family:"Open Sans",sans-serif;
  --bs-body-font-size:12px;
  --bs-body-color:#777777;
  /* SUPERFÍCIE = branco. O BS5.3 deriva --bs-card-bg/--bs-modal-bg/--bs-dropdown-bg/
     --bs-list-group-bg/--bs-accordion-bg de var(--bs-body-bg); no BS4 4.1.3 esses eram #fff
     fixo. O fundo da PÁGINA NÃO depende disto (vem de style.css body{background:#f4f7fa}),
     então #fff aqui deixa só cards/modais/seções brancos, como em produção. */
  --bs-body-bg:#fff;
}

/* SCROLL — o reboot do BS5 adiciona @media(prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
   (o BS4 4.1.3 NÃO tinha). No Chrome isso deixa a rolagem do MOUSE animada/"pesada/lenta" e faz
   scrolls de aba/âncora ANIMAREM a descida da página. Voltamos ao instantâneo do BS4. */
:root{ scroll-behavior:auto !important; }

/* ===================== M2 — SHIMS de classes removidas pelo BS5 =====================
   Recriadas com o valor EXATO do core BS4, para que o markup legado continue
   funcionando depois do flip. */

/* .form-group: o BS5 não dá mais margin-bottom automático. Mantemos a classe no markup
   (edit_item_form.html usa $().closest('.form-group') no JS) e recriamos o respiro. */
.form-group{ margin-bottom:1rem; }

/* GRID — repõe o gutter do BS4 (que vinha do bootstrap.min.css 4.1.3 @importado no style.css,
   agora removido). BS4 .row = 30px (15px/lado); BS5 = 24px (12px/lado). :where() tem
   especificidade 0, então .g-*/.gx-*/.gy-* continuam vencendo (ex.: .row.g-2 dos forms migrados). */
:where(.row){ --bs-gutter-x:30px; }

/* ===================== M3 — REAPLICAÇÃO DE MARCA NAS CLASSES BS5 =====================
   O theme.css/dark.css/profile.css miram os nomes BS4 (.custom-select, .custom-control-*,
   .badge-*, .input-group-prepend/append, .font-weight-bold). Quando o markup migrar para
   os nomes BS5, estas regras reaplicam o MESMO visual de marca. INERTES no BS4 (as classes
   BS5 ainda não existem no markup); ativam no flip. NÃO editamos os arquivos de marca —
   tudo fica aqui, removível de uma vez se precisar reverter. */

/* --- Select (.form-select) = mesmo look de .custom-select/.form-control (theme.css:166) +
   fonte 14px do Datta (BS5 inflaria p/ 16px). 'background-color' (NÃO 'background') p/ não
   apagar a seta SVG do BS5; padding-right preserva o espaço da seta. --- */
.form-select{
  background-color:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink);
  padding:10px 20px;
  padding-right:2.25rem;
  font-size:14px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-select:focus{
  background-color:#fff;
  border-color:var(--brand-blue);
  box-shadow:var(--focus-ring);
  outline:0;
}

/* --- Switch/checkbox/radio (.form-check-input) = azul da marca no ligado/foco (theme.css:190).
   NÃO setar background-image: no checkbox apagaria o check SVG; no switch, o thumb deslizante.
   (O gradiente do track do switch é refinamento da fase de reconciliação visual.) --- */
.form-check-input:checked{
  background-color:var(--brand-blue);
  border-color:var(--brand-blue);
}
.form-check-input:focus{
  border-color:var(--brand-blue);
  box-shadow:var(--focus-ring);
}

/* --- Badge: cor de texto HERDADA (como no BS4). O BS5 dá .badge { color:#fff } por padrão
   (--bs-badge-color:#fff) → badges com fundo CLARO custom (ex.: status "Bom" #f0f0f0) ficam
   ilegíveis (branco no claro). Restaura o herdado do BS4; os coloridos .text-bg-* sobrescrevem
   com a própria cor (#fff/#000, com !important), então só os badges "neutros" são afetados. --- */
.badge{ color:inherit; }

/* --- Badges (.text-bg-*) = cores da MARCA (theme.css:381 mira .badge-* do BS4).
   !important p/ vencer o .text-bg-* nativo do BS5 (que usaria #007bff/#0dcaf0). --- */
.text-bg-primary{ background-color:var(--brand-blue)!important; color:#fff!important; }
.text-bg-info{ background-color:var(--brand-cyan)!important; color:#fff!important; }

/* --- Sidebar: o seletor de cliente (#currentClientSelect) vira .form-select no flip
   (era <select class="form-control">) → replica o styling navy/translúcido (theme.css:116). --- */
.pcoded-navbar .form-select{
  background-color:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16);
  color:#eaf1ff; border-radius:10px;
  /* seta CLARA (a do BS5 é #343a40, some no navy) */
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c7d2fe' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.pcoded-navbar .form-select:focus{
  background-color:rgba(255,255,255,.14);
  border-color:rgba(124,192,255,.5);
  box-shadow:none; color:#fff;
}
.pcoded-navbar .form-select option{ color:#0f172a; background:#fff; }

/* NOTA dark-mode: NÃO reaplicar aqui as regras body.dark de .custom-select/.input-group
   do dark.css. Motivo: base.html NÃO carrega dark.css (só o base-fullscreen). Mas o
   dark-mode.js seta body.dark a partir do localStorage. Se puséssemos body.dark .form-select
   aqui (arquivo carregado em TODAS as páginas), os selects ficariam ESCUROS numa página
   clara (dark.css ausente) — regressão. Em produção (BS4) isso nunca ocorria porque o
   tema NÃO tem body.dark em arquivo global. Se o dark-mode interno voltar a existir,
   a reaplicação BS5 deve ir no PRÓPRIO dark.css, carregado junto. */

/* --- Perfil: realce navy do nome do grupo (.fw-bold no lugar de .font-weight-bold,
   profile.css:42). Escopado em .anomalus-profile → só na tela de perfil. --- */
.anomalus-profile .list-group-item .fw-bold{ color:var(--ap-navy, #1e3a8a); }

/* ===================== M4 — RECONCILIAÇÃO PÓS-VALIDAÇÃO (igualar a produção) =====================
   Ajustes finos apontados na validação do app real (vs produção BS4). */

/* (A) TABELAS — o BS5 desenha as bordas das células com var(--bs-border-color), que travamos
   em #ced4da (p/ inputs). Em tabela isso fica mais ESCURO/pesado que a produção (#e2e8f0 do tema).
   Reaponta SÓ a borda da tabela p/ o tom claro do tema, sem mexer no #ced4da dos inputs. */
.table{
  --bs-table-border-color:#e2e8f0;     /* bordas claras (não o #ced4da global dos inputs) */
  --bs-table-bg:transparent;           /* prod = linhas brancas (fundo do card); BS5 herdava #f4f7fa */
  border-color:#e2e8f0;
}

/* (B) BOTÃO FECHAR — produção usa o "×" fino do .close do BS4; o BS5 troca por um SVG.
   Restaura o glyph textual exato (font-size/peso/sombra/opacidade do .close do Datta). */
.btn-close{
  background-image:none;              /* remove o SVG do BS5 */
  width:auto; height:auto; padding:0;
  font-size:1.5rem; font-weight:700; line-height:1;
  color:#000; text-shadow:0 1px 0 #fff; opacity:.5;
  box-shadow:none;
}
.btn-close::before{ content:"\00D7"; }   /* × */
.btn-close:hover{ color:#000; opacity:.75; }
/* (B2) o BS5 dá foco PROGRAMÁTICO no btn-close ao abrir o modal e o :focus mostra o anel
   (× "destacado" por padrão). O BS4 .close não tinha anel (só mudava opacidade). Igualamos:
   sem anel, só opacidade .75 ao focar — como produção. */
.btn-close:focus{ box-shadow:none; outline:0; opacity:.75; }
/* (B3) generaliza: o BS5 dá foco programático no 1º elemento focável ao abrir modal/aba, e o
   theme.css desenha o anel no :focus de QUALQUER botão. Resultado: botões "destacados" ao abrir
   (ex.: "Relatório"). Suprime o anel no foco NÃO-teclado; mantém no teclado (:focus-visible). */
.btn:focus:not(:focus-visible){ box-shadow:none !important; }

/* (F) MODAIS com largura em vw (style="width:Xvw; margin:auto" no PRÓPRIO .modal) ancoravam à
   ESQUERDA no BS5 — o .modal é position:fixed;left:0;width:100% (sem right:0), então o width:Xvw
   inline fica pinado à esquerda e o margin:auto não centraliza. right:0 + margin auto recentraliza,
   preservando o vw de cada modal (~11 modais: detailsModal, modalDetalhesIncidentes, etc.). */
.modal[style*="vw"]{
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* (C) SWITCH — igualar ao custom-switch do Datta (produção):
   geometria (trilho 1.75rem×1rem), OFF cinza sólido #ccc, ON com o GRADIENTE da marca
   (azul→ciano) preservando o thumb branco do BS5 (1ª camada = var(--bs-form-switch-bg)). */
.form-switch{ padding-left:2.25rem; }
.form-switch .form-check-input{
  width:1.75rem; height:1rem; margin-top:.2rem;
  border-radius:1rem;   /* pílula completa (pontas semicirculares), como o custom-switch do Datta */
}
.form-switch .form-check-input:not(:checked){
  background-color:#ccc;
  border-color:#ccc;
}
.form-switch .form-check-input:checked{
  background-image: var(--bs-form-switch-bg), var(--brand-grad);
  background-position: right center, center;
  background-size: contain, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-origin: border-box;    /* faz a imagem-gradiente preencher/clipar na pílula (senão vira retângulo) */
  background-clip: border-box;
  background-color: transparent;
  border-color: transparent;
  border-radius: 1rem;
}

/* (D) INPUT-GROUP-APPEND / -PREPEND — os WRAPPERS foram REMOVIDOS no BS5 (agora o botao/
   texto vai direto dentro de .input-group). O markup legado ainda usa esses wrappers
   (ex.: combo de classificacao + botao "+" em contextoia.html) e, sem eles estilizados,
   o BS5 deixa o botao "solto" ao lado do campo (cantos arredondados, sem fundir e com a
   altura desalinhada). Recriamos o comportamento do BS4:
   - o wrapper vira flex -> o botao estica para a altura do campo;
   - os cantos do botao ADJACENTES ao campo ficam retos -> fundem num componente unico.
   (A sobreposicao de -1px o proprio BS5 ja aplica no filho que nao e o primeiro.) */
.input-group > .input-group-prepend,
.input-group > .input-group-append{ display:flex; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text{
  border-top-left-radius:0; border-bottom-left-radius:0;
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text{
  border-top-right-radius:0; border-bottom-right-radius:0;
}