/* ============================================================================
   Sidebar compartilhada (css/sidebar.css + js/widgets/sidebar/sidebar.js)

   Nasceu no módulo IA, onde a faixa de `.nav-tabs` já passava de 10 abas e
   quebrava em duas linhas, e foi extraída para servir às outras páginas. Plano
   do rollout: .mappy/analyses/sidebar-rollout-20260911.md.

   MARKUP ESPERADO

     <head>
       <!-- mdr-theme-boot --> ...                           tema, gravado por tools/themeBoot.js
       <style>@media (...) { @view-transition { navigation: auto; } }</style>
       <link rel="stylesheet" href=".../css/theme.css">      tokens, antes desta folha
       <link rel="stylesheet" href=".../css/sidebar.css">    ver "Continuidade entre páginas"
     <body class="sb-on">
       <div id="mdrSidebarBackdrop"></div>
       <button id="mdrSidebarOpen" class="sb-fab">          gaveta (< 992px)
       <aside id="mdrSidebar" data-sb-page="<nome-da-página>">
         <div class="sb-brand">                              opcional
           <a class="sb-logo"><img class="sb-logo-full"><img class="sb-logo-mark">
         <button id="mdrSidebarToggle" class="sb-toggle">
         <nav id="navigation" class="sb-nav">
           <div class="sb-group" data-group="<id>">
             <button class="sb-group-title">
             <div class="sb-group-items">
               <a class="nav-link sb-item" id="<x>-link" data-tip="<rótulo>">
                 <i class="sb-ico"></i><span class="sb-text">
       </aside>
       <script src=".../js/theme/theme.js"></script>             síncrono, antes do sidebar.js
       <script src=".../js/widgets/sidebar/sidebar.js"></script>   síncrono, aqui

   REGRA DE OURO: cada item continua sendo `.nav-link` com o mesmo id `<x>-link`
   de antes. Gate de permissão (authJS.js e o JS da página), badges, tours e
   testes acham os itens pelo id; o markup em volta pode mudar, o id não.

   REGIÃO CONECTADA (#dbInfo) FICA FORA DA SIDEBAR. O trilho e a gaveta escondem
   a sidebar, e essa informação tem de estar sempre à vista: ela mora no
   conteúdo da página, à direita do logo ou do <h1>, alinhada pelo pé, logo
   acima da tabela. Nada nesta folha nem no sidebar.js mexe nela.

   `id="navigation"` fica no <nav> e não no <aside>: o authJS.js liga e desliga
   o `d-none` dele, e sumir com a lista não pode levar o casco junto.

   TRILHO SÓ NO DESKTOP: todas as regras de `body.sb-rail` moram dentro de
   `@media (min-width: 992px)`. Abaixo disso a sidebar é gaveta e abre sempre
   inteira, mesmo que a preferência salva diga "recolhida" - sem precisar de um
   bloco que desfaça o trilho regra por regra.

   TEMA: todas as cores saem das custom properties `--sb-*` em `:root`, que
   apontam para os tokens `--mdr-*` do css/theme.css (com o valor de hoje como
   reserva, para a sidebar não perder a cor se a página vier sem aquela folha).
   O escuro entra com `data-theme="dark"` no <html>, gravado pelo boot do tema
   (tools/themeBoot.js) e pelo js/theme/theme.js. De propósito NÃO há
   `@media (prefers-color-scheme: dark)`: o tema é só o que a pessoa escolhe no
   botão.

   O botão de tema (alterna claro <-> escuro) é montado pelo sidebar.js em toda
   página sem `data-theme-lock`. Plano completo: docs/dark-mode/01-plano-dark-mode.md.

   MARCADOR DE AMBIENTE: em localhost o sidebar.js revela os #tracoDev/#tracoDev2
   da página (o <h1> vermelho ao lado do logo) e cria o par onde ele não existe,
   para toda tela avisar que está em dev.
   ========================================================================== */

:root {
  --sb-w: 244px;
  --sb-w-rail: 68px;

  --sb-bg: var(--mdr-surface-alt, #f7f9fc);
  --sb-border: var(--mdr-border, #e5e9f0);
  --sb-text: var(--mdr-text-secondary, #46536b);
  --sb-text-strong: var(--mdr-text-strong, #1f2937);
  --sb-muted: var(--mdr-text-subtle, #94a3b8);
  --sb-icon: var(--mdr-icon, #7b8794);
  --sb-hover-bg: var(--mdr-hover, #e8f0fe);
  --sb-active-bg: var(--mdr-active, #e0ecff);
  --sb-active-text: var(--mdr-accent-text, #0b5ed7);
  --sb-accent: var(--mdr-accent, #0d6efd);
  --sb-fab-bg: var(--mdr-surface-raised, #ffffff);
}

/* Mesmo mapeamento; só as reservas mudam. Com o css/theme.css carregado, os
   tokens já trocam sozinhos e este bloco não acrescenta nada. */
:root[data-theme="dark"] {
  --sb-bg: var(--mdr-surface-alt, #1e2635);
  --sb-border: var(--mdr-border, #2c3648);
  --sb-text: var(--mdr-text-secondary, #b9c2d0);
  --sb-text-strong: var(--mdr-text-strong, #f1f5f9);
  --sb-muted: var(--mdr-text-subtle, #6b7789);
  --sb-icon: var(--mdr-icon, #8d99ab);
  --sb-hover-bg: var(--mdr-hover, #29344a);
  --sb-active-bg: var(--mdr-active, #2f3d57);
  --sb-active-text: var(--mdr-accent-text, #9cc2ff);
  --sb-accent: var(--mdr-accent, #4d8dff);
  --sb-fab-bg: var(--mdr-surface-raised, #29344a);
}

/* ── Continuidade entre páginas ──
   O sistema é multipágina: a cada clique na sidebar ela é destruída e redesenhada,
   que é o salto que o <script> síncrono tenta evitar. Com a transição de documento
   a <aside> fica parada e só o conteúdo faz crossfade. Vale para navegação por
   link (o caso dos itens do navModel); quem não suporta navega como antes.

   O opt-in (`@view-transition`) NÃO mora aqui: fica num <style> inline no <head>
   de cada página. O Chrome decide se a página nova aderiu enquanto ainda está
   lendo o <body>, e numa página sem <script> no <head> esta folha ainda não foi
   aplicada nessa hora: a transição é abortada com "Transition was aborted
   because of invalid state. ViewTransition opt-in disabled". Aqui fica só o nome
   que mantém a <aside> parada. */

#mdrSidebar {
  view-transition-name: mdr-sidebar;
}

/* ── O "empurrão" do conteúdo ──
   É `padding-left` e não `margin-left` porque o widget de apresentação
   (js/widgets/apresentacao.js) já usa `body { margin-right }` para o painel
   dele; propriedades diferentes = os dois empurram sem se atropelar. */
body.sb-on {
  /* O `+ 16px` é o respiro: com o padding igual à largura da sidebar o conteúdo
     encostava nela. Sem `transition`: animar o padding do body força o layout da
     página inteira a cada quadro, e nas telas com Tabulator (search, compras,
     solicitações) o recolher/expandir travava enquanto as colunas recalculavam.
     Só a <aside> anima, e ela é `position: fixed`: não empurra layout nenhum. */
  padding-left: calc(var(--sb-w) + 16px);
}

/* ── Casco ── */
#mdrSidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sb-w);
  display: flex;
  flex-direction: column;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  /* Acima do conteúdo (1030 = "fixed" do Bootstrap) e abaixo do backdrop de
     modal (1050), para os modais continuarem cobrindo tudo. */
  z-index: 1035;
  /* Sem `visible`: quem rola é só a lista, o resto fica ancorado. */
  overflow: hidden;
  transition: width 0.22s ease, transform 0.22s ease;
}

/* ── Marca ──
   Opcional: página que já mostra o logo no próprio conteúdo não o repete aqui. */
.sb-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 62px;
  padding: 14px 12px 10px;
}

.sb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.sb-logo-full {
  width: 140px;
  max-width: 100%;
}

/* Marca reduzida: é o que sobra do logo quando a sidebar está em trilho */
.sb-logo-mark {
  display: none;
  width: 15px;
}

/* ── Marcador de ambiente ──
   Uma pill só, criada pelo sidebar.js quando o endereço é localhost ou
   127.0.0.1, igual em todas as páginas.

   Os #tracoDev/#tracoDev2 de cada página continuam no DOM (guardados dentro da
   marca) e somem aqui: o JS de várias delas (search.js, compras.js, archive.js,
   modulo_gestao_ia.js) liga e desliga esses elementos sem checar se existem,
   então removê-los do HTML daria erro. */
.sb-dev-badge {
  flex: 0 0 auto;
  margin: 10px 12px 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: #dc3545;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

#tracoDev,
#tracoDev2 {
  display: none !important;
}

/* O botão de tema (#theme-toggle) é um `.sb-item` do rodapé, acima do Feedback, em
   toda página sem tema travado: herda o desenho dos itens. Ver o bloco TEMA lá em
   cima e o sidebar.js. */

/* Aviso "New: dark mode" (sidebar.js): balão ao lado do botão de tema, uma vez
   por navegador. Mora no <body> porque a <aside> corta o que passa dela; acima
   da sidebar (1035) e abaixo do backdrop de modal (1050). */
.sb-theme-tip {
  position: fixed;
  z-index: 1040;
  width: 250px;
  padding: 12px 14px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: var(--sb-fab-bg);
  color: var(--sb-text);
  font-size: 0.82rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}

/* Seta apontando para o botão (o sidebar.js calcula a altura em --sb-tip-seta) */
.sb-theme-tip::before {
  content: "";
  position: absolute;
  top: var(--sb-tip-seta, 16px);
  left: -7px;
  width: 12px;
  height: 12px;
  border-left: 1px solid var(--sb-border);
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-fab-bg);
  transform: rotate(45deg);
}

.sb-theme-tip strong {
  display: block;
  margin-bottom: 2px;
  color: var(--sb-text-strong);
}

.sb-theme-tip p {
  margin: 0 0 8px;
}

.sb-theme-tip-ok {
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--sb-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Botão de recolher/expandir ── */
.sb-toggle {
  align-self: flex-end;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0 12px 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: transparent;
  color: var(--sb-icon);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Sem marca, o botão é a primeira coisa do casco e precisaria de ar em cima */
#mdrSidebar > .sb-toggle:first-child {
  margin-top: 12px;
}

.sb-toggle:hover {
  background: var(--sb-hover-bg);
  color: var(--sb-active-text);
}

/* ── Lista ── */
.sb-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 12px;
}

.sb-group + .sb-group {
  margin-top: 10px;
}

/* Rodapé da sidebar: o que NÃO leva a lugar nenhum (hoje só o Feedback, que abre
   uma caixa). Fica colado embaixo e separado por uma linha, porque misturar ação
   com destino na mesma lista tira da pessoa a capacidade de prever o clique. */
.sb-nav {
  display: flex;
  flex-direction: column;
}

/* A especificidade precisa bater a de `.sb-group + .sb-group`, que vem antes e
   daria os 10px de sempre no lugar do `auto` que cola o grupo embaixo. */
.sb-group.sb-group-rodape,
.sb-group + .sb-group.sb-group-rodape {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--sb-border);
}

/* Sinal de que o destino é outro sistema, para quem VÊ (o leitor de tela recebe o
   mesmo aviso pelo aria-label que o navModel.js escreve). Discreto de propósito:
   é um aviso, não um segundo ícone. */
#mdrSidebar .sb-ext {
  margin-left: auto;
  font-size: 0.6rem;
  opacity: .55;
}

#mdrSidebar .sb-item:hover .sb-ext,
#mdrSidebar .sb-item.active .sb-ext {
  opacity: .85;
}

/* O cabeçalho é um <button>: abrir/fechar o grupo é uma ação, e teclado e
   leitor de tela precisam enxergá-la (daí aria-expanded no markup). O
   `display: flex` num button já ocupa a largura toda, mas o `width` explícito
   evita depender do sizing especial que o elemento tem. */
.sb-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px 4px;
  border: none;
  background: transparent;
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--sb-muted);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.sb-group-title:hover {
  color: var(--sb-text-strong);
}

.sb-group-title:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: -2px;
  border-radius: 4px;
}

.sb-group-caret {
  margin-left: auto;
  font-size: 0.58rem;
  transition: transform 0.18s ease;
}

.sb-group.is-collapsed .sb-group-caret {
  transform: rotate(-90deg);
}

.sb-group.is-collapsed .sb-group-items {
  display: none;
}

/* Ponto no cabeçalho de um grupo FECHADO que guarda o item ativo: sem ele dá
   para estar numa aba com o grupo dela fechado e não ter nenhuma pista de onde
   se está. Quem põe/tira a classe é o refreshActive() do sidebar.js. */
.sb-group-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sb-accent);
}

.sb-group.has-hidden-active .sb-group-dot {
  display: block;
}

/* Os itens ainda são `.nav-link` (o JS depende disso), e o bootstrap.min.css
   pode vir DEPOIS desta folha, então cada regra abaixo leva o `#mdrSidebar`
   na frente para vencer `.nav-link` / `.nav-tabs .nav-link.active`. */
#mdrSidebar .sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  margin: 2px 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  color: var(--sb-text);
  font-size: 0.875rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Item que NAVEGA para outra página é `<a href>`; item que troca a VISÃO da
   página é `<button type="button">`, para entrar na ordem de Tab (um `<a>` sem
   href não entra, e quem usa só teclado não conseguia trocar de aba). As duas
   formas usam as mesmas classes e os mesmos ids; daqui sai só o reset do botão. */
#mdrSidebar button.sb-item {
  /* `width: 100%` aqui seria 20px a mais que o espaço util (o item tem
     `margin: 2px 10px`), e no trilho isso empurra o ícone para fora do centro. */
  width: calc(100% - 20px);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
}

#mdrSidebar .sb-item:hover {
  background: var(--sb-hover-bg);
  color: var(--sb-text-strong);
}

#mdrSidebar .sb-item.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sb-accent);
}

#mdrSidebar .sb-item:focus-visible {
  outline: 2px solid var(--sb-accent);
  outline-offset: -2px;
}

#mdrSidebar .sb-ico {
  flex: 0 0 auto;
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--sb-icon);
}

/* Ícone que é a marca de um sistema de fora, e não um glifo. Entra como MÁSCARA
   para herdar a cor do item (cinza parado, azul ativo) do mesmo jeito que os
   glifos do Font Awesome: o arquivo em `--sb-ico-url` (posto pelo navModel.js) é
   só a silhueta, e quem pinta é o `currentColor` daqui. Para usar a marca na cor
   original, troque as duas linhas de máscara por `background: var(--sb-ico-url)
   center / contain no-repeat`. */
#mdrSidebar .sb-ico-img {
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--sb-ico-url) center / contain no-repeat;
  mask: var(--sb-ico-url) center / contain no-repeat;
}

/* Marca nas CORES dela, e não na cor do item: a máscara sai de cena e o arquivo
   entra como imagem. Vale para a marca que não sobrevive a uma cor só - o Sparks
   tem gradiente navy para cyan e um acento âmbar, o OnBoard tem três cores. O
   preço é que estes dois ícones não reagem ao estado do item (parado, ativo),
   diferente dos glifos do Font Awesome. `iconImgCor: true` no navModel.js. */
#mdrSidebar .sb-ico-img-cor {
  background-color: transparent;
  -webkit-mask: none;
  mask: none;
  background: var(--sb-ico-url) center / contain no-repeat;
}

/* No escuro as cores do OnBoard somem no fundo: o arquivo volta a ser máscara e o
   ícone sai branco, só a silhueta da marca. */
:root[data-theme="dark"] #mdrSidebar #onboard-link .sb-ico-img-cor {
  background: #fff;
  -webkit-mask: var(--sb-ico-url) center / contain no-repeat;
  mask: var(--sb-ico-url) center / contain no-repeat;
}

#mdrSidebar .sb-item:hover .sb-ico,
#mdrSidebar .sb-item.active .sb-ico {
  color: inherit;
}

#mdrSidebar .sb-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Trilho (só desktop) ── */
@media (min-width: 992px) {
  body.sb-on.sb-rail {
    padding-left: calc(var(--sb-w-rail) + 16px);
  }

  body.sb-rail #mdrSidebar {
    width: var(--sb-w-rail);
  }

  body.sb-rail .sb-logo-full {
    display: none;
  }

  body.sb-rail .sb-logo-mark {
    display: block;
  }

  body.sb-rail .sb-dev-badge {
    margin-inline: 8px;
    padding-inline: 0;
    font-size: 0.55rem;
    letter-spacing: 0.02em;
  }

  body.sb-rail .sb-toggle {
    align-self: center;
    margin-inline: 0;
  }

  body.sb-rail .sb-toggle i {
    transform: rotate(180deg);
  }

  /* O rótulo do grupo não cabe: vira um traço separador, e com ele some o
     jeito de reabrir um grupo. Por isso o trilho ignora o "fechado": os ícones
     continuam todos à mostra e a preferência espera a sidebar ser expandida. */
  body.sb-rail .sb-ext {
    display: none;
  }

  body.sb-rail .sb-group-title {
    width: auto;
    font-size: 0;
    padding: 0;
    margin: 10px 16px 8px;
    border-top: 1px solid var(--sb-border);
    pointer-events: none;
  }

  /* O `.sb-group.has-hidden-active` precisa aparecer aqui: sem ele o seletor
     fica em (0,2,1) e PERDE para a regra do ponto, que tem três classes
     (0,3,0) - a contagem de classes decide antes da de tipos. No trilho o ponto
     não tem função: nada fica escondido e o item ativo já se lê pela pílula. */
  body.sb-rail .sb-group-caret,
  body.sb-rail .sb-group-dot,
  body.sb-rail .sb-group.has-hidden-active .sb-group-dot {
    display: none;
  }

  body.sb-rail .sb-group.is-collapsed .sb-group-items {
    display: block;
  }

  body.sb-rail .sb-group:first-child .sb-group-title {
    border-top: none;
    margin-top: 0;
  }

  /* Sobra o ícone centralizado. O rótulo vira `title` (posto pelo JS), e não
     um tooltip em CSS, porque `.sb-nav` rola e recortaria a bolha. */
  body.sb-rail #mdrSidebar .sb-item {
    justify-content: center;
    gap: 0;
    padding: 11px 0;
    margin-inline: 10px;
  }

  body.sb-rail #mdrSidebar .sb-text {
    display: none;
  }
}

/* ── Telas baixas ──
   Quem vê quase todos os links (coordenador, líder, IA/DI) chega a 14 itens no
   "Go to", e numa janela baixa (notebook com escala de 125%, por exemplo) a lista
   rolava. Aqui só o respiro vertical diminui: telas altas ficam como estão e cada
   item continua acima do alvo mínimo de 24 px (WCAG 2.2). Se a lista crescer de
   novo, o próximo passo é agrupar o "Go to" por assunto, não apertar mais. */
@media (max-height: 800px) {
  #mdrSidebar .sb-item {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .sb-group-title {
    padding-top: 6px;
  }
}

@media (min-width: 992px) and (max-height: 800px) {
  body.sb-rail #mdrSidebar .sb-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ── Gaveta em telas estreitas ── */
.sb-fab {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1036;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--sb-border);
  border-radius: 8px;
  background: var(--sb-fab-bg);
  color: var(--sb-text);
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
  cursor: pointer;
}

#mdrSidebarBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1034;
  background: rgba(0, 0, 0, 0.4);
}

@media (max-width: 991.98px) {
  /* Sobreposta: o conteúdo não é mais empurrado, senão sobrariam ~80px de
     página útil no celular. */
  body.sb-on {
    padding-left: 0;
    /* Espaço para o botão flutuante não cobrir o topo do conteúdo */
    padding-top: 48px;
  }

  #mdrSidebar {
    transform: translateX(-100%);
  }

  /* A sombra só com a gaveta aberta: fechada, ela vazaria como uma faixa
     escura na borda esquerda da tela. */
  body.sb-open #mdrSidebar {
    transform: translateX(0);
    box-shadow: 2px 0 16px rgba(16, 24, 40, 0.18);
  }

  body.sb-open #mdrSidebarBackdrop {
    display: block;
  }

  .sb-fab {
    display: flex;
  }

  /* Com a gaveta aberta o botão flutuante ficaria por cima do logo (ele tem
     z-index maior que a sidebar, para poder flutuar sobre o conteúdo). */
  body.sb-open .sb-fab {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mdrSidebar,
  #mdrSidebar .sb-item,
  .sb-toggle {
    transition: none;
  }
}

/* O gate de permissão (authJS.js) esconde e revela itens com `.d-none`, que
   normalmente vem do Bootstrap. O workforce_planner.html não o carrega, e sem
   esta cópia da regra os itens restritos nasceriam visíveis lá. Em quem tem
   Bootstrap a regra é idêntica à dele. */
.d-none {
  display: none !important;
}

/* ── Páginas com tela de bloqueio (login, acesso negado) ──
   Enquanto a navegação não foi liberada, o casco sai junto: senão a tela de
   login ganharia uma faixa cinza com um botão de recolher do lado.

   Quem liga e desliga a classe `sb-gated` é o sidebar.js, olhando o elemento
   apontado por `data-sb-gate` no <aside> (no index é o próprio #navigation, que
   o serverSide.js mostra depois da sessão; no workforce é o #app-content).

   Antes isto era um seletor com `:has()` em cima do `style` inline, e ele
   reavaliava a cada mudança de estilo da página: nas telas com Tabulator a
   navegação inteira ficava lenta. */
body.sb-gated #mdrSidebar {
  display: none;
}

/* O casco sai inteiro, e não só o <aside>: abaixo de 992px o botão flutuante
   continuaria clicável sobre a tela de login, e abrir a gaveta ali cobriria o
   formulário com o backdrop sem nenhuma sidebar por baixo para navegar. */
body.sb-gated .sb-fab,
body.sb-gated #mdrSidebarBackdrop {
  display: none !important;
}

body.sb-on.sb-gated {
  padding-left: 0;
}

/* ── Badges de notificação dentro de um item ──
   Os widgets (solicitacoesNotification.js, backlogNotification.js,
   ctrLiderBadge.js) injetam CSS que põe o badge no canto de uma ABA. Na sidebar
   o item é uma linha: o badge encosta na direita, e no trilho volta a flutuar
   sobre o ícone. O `#mdrSidebar .sb-item` na frente vence o CSS injetado, que
   entra no <head> depois desta folha. */
#mdrSidebar .sb-item .solicitacoes-badge,
#mdrSidebar .sb-item .backlog-badge,
#mdrSidebar .sb-item #ctrlider-badge {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
  box-shadow: none;
}

@media (min-width: 992px) {
  body.sb-rail #mdrSidebar .sb-item .solicitacoes-badge,
  body.sb-rail #mdrSidebar .sb-item .backlog-badge,
  body.sb-rail #mdrSidebar .sb-item #ctrlider-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    margin-left: 0;
    box-shadow: 0 0 0 2px var(--sb-bg);
  }
}

/* ── Selo de anúncio (`badge` no navModel.js, ex.: "New") ──
   Pílula à direita do rótulo; no trilho o texto não cabe e ela vira um ponto no
   canto do ícone, como os badges de notificação acima. Fica no ponto da cor de
   destaque, e não no vermelho dos badges, porque anuncia novidade, não pendência. */
#mdrSidebar .sb-selo {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sb-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

@media (min-width: 992px) {
  body.sb-rail #mdrSidebar .sb-selo {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    box-shadow: 0 0 0 2px var(--sb-bg);
  }
}

/* ── Região conectada (FORA da sidebar) ──
   O #dbInfo tem de ficar sempre à vista, e o trilho e a gaveta escondem a
   sidebar: ele mora no conteúdo da página, logo acima da tabela. O padrão das
   páginas migradas é o título seguido de uma barra com o #dbInfo e os botões
   que a página tiver:
     <div class="mdr-page-titulo">
       <div><h1>PMT</h1><p>Master document registry of the active projects</p></div>
     </div>
     <div class="mdr-page-toolbar mb-2">
       <span id="dbInfo" class="mdr-db-info text-muted d-none"></span>
     </div> */
.mdr-db-info {
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Título da página ──
   Título e uma linha de contexto no topo do conteúdo, iguais em todas as telas.
   O `h1` das páginas costuma vir centralizado e com margens próprias (styles.css
   e companhia), então aqui ele é redefinido por inteiro. */
.mdr-page-titulo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  /* Margem curta de propósito: o conteúdo de cada página começa logo abaixo do
     subtítulo. Quem precisa de mais respiro pede na própria página (é o `mt-4`
     da navbar do solicitações), para não abrir buraco em todas as telas. */
  margin: 4px 0 6px;
}

/* Título e subtítulo andam juntos, um embaixo do outro: quem fica ao lado deles
   é só a região conectada, nas páginas em que ela vem para esta linha. Sem isto,
   um <h1> solto viraria item do flex e o subtítulo iria parar ao lado dele. */
.mdr-page-titulo > div {
  min-width: 0;
}

.mdr-page-titulo h1 {
  margin: 0;
  padding: 0;
  /* Zerada porque várias páginas estilizam `h1` no seletor solto, para os
     títulos dos formulários delas, e a borda vazava para este título. */
  border: 0;
  color: var(--mdr-text-strong, #1f2937);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.mdr-page-titulo p {
  margin: 2px 0 0;
  color: var(--mdr-text-muted, #6c757d);
  font-size: 0.85rem;
  line-height: 1.3;
}

/* ── Faixa de abas da página ──
   As visões de uma página (as abas que ela troca entre si) ficam no conteúdo, e
   não na sidebar: numa tela em que se troca de aba o tempo todo, a sidebar
   esconde demais. O desenho é o componente navbar do Bootstrap; daqui sai só o
   que ele não cobre. Os links continuam sendo `.nav-link` com os mesmos ids,
   que é o que o JS de cada página procura. */
/* Item que troca a visão da página é `<button type="button">`, pelo mesmo
   motivo da sidebar: `<a>` sem href não entra na ordem de Tab. O reset deixa o
   botão com a cara do link que o Bootstrap desenha. */
.navbar button.nav-link {
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
}

.navbar .nav-link,
.navbar .dropdown-item {
  cursor: pointer;
  /* Aba fechada é link, e link é azul; a aberta fica preta, que é o que marca
     onde se está. O cinza do navbar-light deixava as duas parecidas demais. */
  color: var(--sb-accent);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: var(--mdr-dk-accent, #0a58ca);
}

/* `.show` é o dropdown aberto; `.active` no toggle vem do observador do
   solicitacoes.js, quando a aba aberta está dentro do menu dele. */
.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .dropdown-item.active {
  color: var(--mdr-dk-text-strong, #000);
  font-weight: 600;
}

/* O item ativo do dropdown vem do Bootstrap com fundo azul e texto branco. */
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background-color: transparent;
}

/* ── Barra de ferramentas da página ──
   Linha própria embaixo do logo, encostada à direita: é onde ficam a região
   conectada e os botões da tabela (search). Numa linha só, junto do logo, os
   botões acabavam embaixo da aba fixa do widget de changelog. */
.mdr-page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* No escuro o logo troca para a versão de letras brancas ("Longitude logo 2.png"):
   quem troca o `src` é o js/theme/theme.js. */