/* =====================================================================
   HyperDash — esqueleto do app sobre o Design System Gruppy.

   O DS (wwwroot/css/gruppy/gruppy.css) traz tokens e componentes, mas e
   escopado em `.g-shell` e nao define o layout de aplicacao (barra lateral
   fixa + conteudo rolando). Este arquivo faz tres coisas, nessa ordem:

   1. o esqueleto (.hd-app, .hd-main, .hd-conteudo) e o comportamento
      responsivo da barra lateral;
   2. a ponte Bootstrap -> tokens do DS, porque componentes de comportamento
      (modal do bootbox, dropdown, tooltip, toast, DataTables, Quill) ainda
      geram markup Bootstrap e precisam sair com a cara do DS;
   3. o punhado de pecas do produto que o DS nao cobre (busca, cartao de
      painel, overlays do Power BI).

   Cor da marca: os tenants sobrescrevem `--g-primaria` em emp-{id}-style.css,
   carregado depois deste arquivo. Nunca escreva cor literal aqui.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Esqueleto
   --------------------------------------------------------------------- */

html, body { height: 100%; }

body.hd-app {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--g-fundo);
}

.hd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hd-conteudo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--g-sp-5);
}

/* Cartao que envolve o conteudo de cada tela. */
.hd-painel {
  background: var(--g-superficie);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-sm);
  padding: var(--g-sp-5);
}

/* Cabecalho da tela (titulo + acoes), preenchido pela section "header". */
.hd-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--g-sp-4);
  padding-bottom: var(--g-sp-3);
  border-bottom: 1px solid var(--g-borda);
}
.hd-cabecalho:empty { display: none; }

.hd-titulo {
  font-size: var(--g-fs-lg);
  font-weight: var(--g-fw-semi);
  color: var(--g-titulo);
  letter-spacing: var(--g-ls-justo);
}

/* Rodape de formulario: faixa com as acoes de salvar/voltar. */
.hd-form-event {
  display: flex;
  gap: var(--g-sp-2);
  margin-top: var(--g-sp-5);
  padding-top: var(--g-sp-4);
  border-top: 1px solid var(--g-borda);
}

/* Link "pular para o conteudo" — visivel apenas ao receber foco. */
.hd-skip-link {
  position: absolute;
  top: -100px;
  left: var(--g-sp-2);
  z-index: var(--g-z-toast);
  background: var(--g-primaria);
  color: var(--g-neutro-0);
  padding: var(--g-sp-2) var(--g-sp-4);
  border-radius: var(--g-radius);
  font-size: var(--g-fs-sm);
}
.hd-skip-link:focus { top: var(--g-sp-2); }

/* ---------------------------------------------------------------------
   1.1 Barra lateral: fixa no desktop, off-canvas no mobile
   --------------------------------------------------------------------- */

.hd-app > .g-sidenav { height: 100vh; }

/* O DS da 60px ao bloco de marca da barra lateral e 56px a barra superior:
   alturas diferentes de proposito, porque no layout de referencia dele os dois
   nao ficam lado a lado. Aqui ficam, e cada um tem borda inferior de 1px na
   mesma cor -- com 4px de diferenca as duas linhas apareciam quebradas no topo,
   uma degrau acima da outra. A barra sobe para 60px e as duas viram uma linha
   so. Os controles dentro dela tem 34px, entao sobra folga. */
.hd-app .g-appbar { height: 60px; }

/* ---------------------------------------------------------------------
   Faixa do topo: marca da barra lateral + barra superior como UMA superficie.
   Indigo 950, o tom mais escuro da rampa do DS, com o 900 na outra ponta para
   o degrade nao ficar chapado. A tinta do que fica por cima sai do esquema
   indigo (--g-esquema-indigo-*). Nenhuma cor literal.
   --------------------------------------------------------------------- */
.hd-app .g-sidenav__marca,
.hd-app .g-appbar {
  background: linear-gradient(90deg, var(--g-indigo-950) 0%, var(--g-indigo-900) 100%);
  border-bottom-color: var(--g-esquema-indigo-borda);
}
/* A marca comeca a faixa e a barra continua: o degrade e um so, atravessando
   as duas caixas. Por isso cada uma recebe o pedaco que lhe cabe. */
.hd-app .g-sidenav__marca { background-size: calc(100vw) 100%; background-position: left center; }
.hd-app .g-appbar        { background-size: calc(100vw) 100%; background-position: right center; }
.hd-app .g-sidenav__marca { border-right: 1px solid var(--g-esquema-indigo-borda); }

/* Conteudo por cima da faixa */
.hd-app .g-appbar__titulo { color: var(--g-esquema-indigo-texto); }
.hd-app .g-appbar__trilha,
.hd-app .g-appbar__trilha span { color: var(--g-esquema-indigo-suave); }
.hd-app .g-appbar__trilha .g-link { color: var(--g-esquema-indigo-texto); }
.hd-app .g-appbar__toggle { color: var(--g-esquema-indigo-suave); }
.hd-app .g-appbar__toggle:hover,
.hd-app .g-appbar .g-btn--ghost:hover { background: var(--g-esquema-indigo-borda); color: var(--g-esquema-indigo-texto); }
.hd-app .g-appbar .g-btn--ghost { color: var(--g-esquema-indigo-suave); }
.hd-app .g-appbar .g-usuario__nome { color: var(--g-esquema-indigo-texto); }
.hd-app .g-appbar .g-usuario__papel { color: var(--g-esquema-indigo-suave); }
.hd-app .g-appbar .g-avatar {
  background: var(--g-esquema-indigo-selecionado);
  color: var(--g-esquema-indigo-selecionado-texto);
}
/* O nome da marca fica sobre o escuro; o simbolo troca para a variante sem
   placa (ver _Menu.cshtml), que e a que o DS indica para fundo escuro. */
.hd-app .g-sidenav__marca .g-marca__nome { color: var(--g-esquema-indigo-texto); }
/* .g-marca__simbolo e `width: auto`, que num <svg> sem tamanho intrinseco cai
   no padrao de 300px. A proporcao do m-simbolo (65 x 53.5) fixa a largura. */
.hd-marca-simbolo { height: 28px; width: 34px; }

/* A marca da barra lateral e a .g-marca do DS. O #img-layout-header e o gancho
   historico do tenant (uma <div> com background-image): some por padrao e so o
   tenant com logotipo proprio o traz de volta, escondendo simbolo e nome. */
.g-sidenav__marca #img-layout-header { display: none; }
.g-sidenav__marca .g-marca { min-width: 0; }
.g-sidenav__marca .g-marca__nome { font-size: var(--g-fs-lg); }

.hd-sidenav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--g-z-overlay);
  background: var(--g-veu);
}

@media (max-width: 991.98px) {
  .hd-app > .g-sidenav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: calc(var(--g-z-overlay) + 1);
    transform: translateX(-100%);
    transition: transform var(--g-dur-base) var(--g-ease);
    box-shadow: var(--g-shadow-md);
  }
  .hd-app.hd-menu-aberto > .g-sidenav { transform: translateX(0); }
  .hd-app.hd-menu-aberto .hd-sidenav-backdrop { display: block; }
  .hd-conteudo { padding: var(--g-sp-3); }
  .hd-painel { padding: var(--g-sp-4); }
}

/* No desktop o botao de recolher alterna a largura da barra. */
@media (min-width: 992px) {
  .hd-app.hd-menu-recolhido > .g-sidenav { width: 60px; }
}

/* ---------------------------------------------------------------------
   2. Ponte Bootstrap -> tokens do DS
   Bootstrap continua carregado pelo comportamento (modal, dropdown,
   tooltip, toast, grid). O visual vem daqui.
   --------------------------------------------------------------------- */

:root {
  --bs-font-sans-serif: var(--g-font-sans);
  --bs-body-font-family: var(--g-font-sans);
  --bs-body-font-size: var(--g-fs-md);
  --bs-body-color: var(--g-texto);
  --bs-body-bg: var(--g-fundo);
  --bs-border-color: var(--g-borda);
  --bs-border-radius: var(--g-radius);
  --bs-border-radius-sm: var(--g-radius-sm);
  --bs-border-radius-lg: var(--g-radius-md);
  --bs-primary: var(--g-primaria);
  --bs-link-color: var(--g-primaria);
  --bs-link-hover-color: var(--g-primaria-hover);
  --bs-danger: var(--g-perigo);
  --bs-success: var(--g-sucesso);
  --bs-warning: var(--g-atencao);
  --bs-info: var(--g-info);
  --bs-secondary-color: var(--g-texto-suave);
}

body { font-family: var(--g-font-sans); font-size: var(--g-fs-md); color: var(--g-texto); }

/* Modal (usado pelo bootbox nas confirmacoes de exclusao) */
.modal-content {
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--g-borda); padding: var(--g-sp-3) var(--g-sp-4); }
.modal-body { padding: var(--g-sp-4); font-size: var(--g-fs-md); color: var(--g-texto); }
.modal-title { font-size: var(--g-fs-lg); font-weight: var(--g-fw-semi); color: var(--g-titulo); }

/* Botoes que o bootbox gera com classes do Bootstrap */
.bootbox .btn, .modal .btn {
  height: 32px;
  padding: 0 var(--g-sp-3);
  display: inline-flex; align-items: center; gap: var(--g-sp-2);
  border: 1px solid transparent;
  border-radius: var(--g-radius);
  font-family: var(--g-font-sans);
  font-size: var(--g-fs-sm);
  font-weight: var(--g-fw-medio);
}
.bootbox .btn-danger, .modal .btn-danger { background: var(--g-perigo); color: var(--g-neutro-0); }
.bootbox .btn-danger:hover, .modal .btn-danger:hover { background: var(--g-perigo-ink); }
.bootbox .btn-secondary, .modal .btn-secondary {
  background: var(--g-superficie); color: var(--g-texto); border-color: var(--g-borda-forte);
}
.bootbox .btn-secondary:hover, .modal .btn-secondary:hover { background: var(--g-fundo); }

/* Dropdown (menu de acoes das tabelas e menu do usuario) */
.dropdown-menu {
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md);
  padding: var(--g-sp-1);
  font-size: var(--g-fs-sm);
  min-width: 180px;
}
.dropdown-item {
  border-radius: var(--g-radius-sm);
  padding: var(--g-sp-2) var(--g-sp-3);
  color: var(--g-texto);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--g-fundo); color: var(--g-titulo); }
.dropdown-item.active, .dropdown-item:active { background: var(--g-primaria-suave); color: var(--g-primaria); }
.dropdown-divider { border-color: var(--g-borda); }

/* Tooltip */
.tooltip-inner {
  background: var(--g-neutro-900);
  border-radius: var(--g-radius);
  font-size: var(--g-fs-2xs);
  padding: var(--g-sp-1) var(--g-sp-2);
}
.tooltip .tooltip-arrow::before { border-top-color: var(--g-neutro-900); }

/* Toast (mensagem de sucesso/erro apos salvar) */
.toast {
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md);
  font-size: var(--g-fs-sm);
}

/* O tom do toast sai dos tokens. As utilidades bg-success/bg-danger do Bootstrap
   trazem o verde e o vermelho dele, que nao sao os do Design System. */
.toast--sucesso { background: var(--g-sucesso); color: var(--g-neutro-0); }
.toast--erro    { background: var(--g-perigo);  color: var(--g-neutro-0); }

/* Foco por teclado nos componentes que continuam sendo do Bootstrap */
.dropdown-item:focus-visible, .btn-close:focus-visible {
  outline: none;
  box-shadow: var(--g-focus-ring);
}

/* ---------------------------------------------------------------------
   3. Pecas do produto que o DS nao cobre
   --------------------------------------------------------------------- */

/* Busca das listagens */
.hd-search { position: relative; width: 100%; max-width: 420px; margin-bottom: var(--g-sp-4); }
.hd-search-icone {
  position: absolute; left: var(--g-sp-3); top: 50%; transform: translateY(-50%);
  color: var(--g-texto-tenue); pointer-events: none; font-size: var(--g-fs-sm);
}
.hd-search .g-input { padding-left: var(--g-sp-8); }

/* Barra de ferramentas acima de uma tabela (busca + filtros) */
.hd-toolbar {
  display: flex; align-items: flex-end; gap: var(--g-sp-3); flex-wrap: wrap;
  margin-bottom: var(--g-sp-4);
}
.hd-toolbar .hd-search { margin-bottom: 0; }
.hd-toolbar .g-field { margin-bottom: 0; }
.hd-toolbar__cresce { flex: 1 1 280px; max-width: 420px; }

/* Barra de filtros das listagens: pesquisa + selects alinhados pela base dentro
   de uma faixa discreta; "Limpar" encostado a direita. Abaixo, a linha de
   resumo com a contagem e um chip por filtro aplicado (clicar remove aquele). */
.hd-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-sp-3) var(--g-sp-4);
  padding: var(--g-sp-3) var(--g-sp-4);
  margin-bottom: var(--g-sp-3);
  background: var(--g-fundo);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
}
.hd-filtros .g-field { margin: 0; }
.hd-filtros__busca { flex: 1 1 260px; max-width: 480px; }
.hd-filtros__busca .hd-search { margin: 0; max-width: none; }
.hd-filtros__campo { flex: 0 1 220px; min-width: 160px; }
.hd-filtros__campo--curto { flex-basis: 130px; min-width: 110px; }
.hd-filtros .g-select { width: 100%; background-color: var(--g-superficie); }
.hd-filtros__acoes { display: flex; align-items: center; gap: var(--g-sp-2); height: 34px; margin-left: auto; }

.hd-filtros__ativos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2);
  min-height: 24px; margin-bottom: var(--g-sp-3);
}
.hd-filtros__rotulo { font-size: var(--g-fs-xs); color: var(--g-texto-suave); margin-right: var(--g-sp-1); }
.hd-filtros__ativos a.g-chip { text-decoration: none; transition: border-color var(--g-dur-rapido) var(--g-ease), background var(--g-dur-rapido) var(--g-ease); }
.hd-filtros__ativos a.g-chip:hover { border-color: var(--g-primaria); background: var(--g-superficie); text-decoration: none; }
.hd-filtros__ativos .g-chip i { font-size: var(--g-fs-3xs); opacity: .7; }

/* Acoes dentro de uma celula de tabela */
.g-table .g-actions { flex-wrap: nowrap; gap: var(--g-sp-1); }

/* Botao so-icone das tabelas (editar, excluir, mais acoes) */
.g-btn--icone {
  width: 28px; height: 28px; padding: 0;
  justify-content: center;
  color: var(--g-texto-suave);
}
.g-btn--icone:hover:not(:disabled) { background: var(--g-fundo); color: var(--g-texto); }
.g-btn--icone.g-btn--perigo-ghost:hover:not(:disabled) { background: var(--g-perigo-bg); color: var(--g-perigo-ink); }

/* Overlay de carregamento global (navegacoes e submits) */
#hd-global-loading {
  position: fixed; inset: 0;
  z-index: var(--g-z-overlay);
  display: none; align-items: center; justify-content: center;
  background: var(--g-veu);
  backdrop-filter: blur(1px);
}
#hd-global-loading.show { display: flex; }
#hd-global-loading .hd-global-spinner { width: 3rem; height: 3rem; color: var(--g-primaria); }

/* Colunas de tabela: centralizada e a linha de "nenhum registro" */
.hd-col-centro { text-align: center; }
/* O DS fixa `.g-table th { text-align: left }` (especificidade 0,1,1), que vence
   as classes de coluna sozinhas: sem isto o corpo centraliza e o cabecalho nao.
   Vale para o cabecalho e o corpo da coluna Ativo (e das acoes, a direita). */
.g-table th.hd-col-centro, .g-table td.hd-col-centro { text-align: center; }
.g-table th.hd-col-acoes, .g-table td.hd-col-acoes { text-align: right; }
.hd-col-vazia {
  text-align: center;
  padding: var(--g-sp-8) var(--g-sp-4) !important;
  color: var(--g-texto-suave);
}

/* Caixa de selecao e switch continuam sendo do Bootstrap (comportamento);
   so a cor de marcado vem do DS. */
.form-check-input:checked {
  background-color: var(--g-primaria);
  border-color: var(--g-primaria);
}
.form-check-input:focus {
  border-color: var(--g-primaria);
  box-shadow: var(--g-focus-ring);
}
.form-check-label { font-size: var(--g-fs-sm); color: var(--g-texto); }

/* O DS estiliza .g-field pensando em campo de coluna unica; dentro de uma
   linha do grid do Bootstrap o padding lateral da coluna precisa sobreviver. */
.g-field[class*="col-"] { display: block; }
.g-field[class*="col-"] > .g-label { display: block; margin-bottom: var(--g-sp-1); }

/* Editor Quill alinhado aos tokens */
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--g-borda); }
.ql-toolbar.ql-snow { border-radius: var(--g-radius) var(--g-radius) 0 0; }
.ql-container.ql-snow { border-radius: 0 0 var(--g-radius) var(--g-radius); font-family: var(--g-font-sans); font-size: var(--g-fs-md); }

/* Cabecalho de coluna ordenavel no servidor (Html.SortHeader) */
.hd-sort {
  display: inline-flex; align-items: center; gap: var(--g-sp-1);
  color: inherit; text-decoration: none; white-space: nowrap;
}
.hd-sort:hover { color: var(--g-primaria); text-decoration: none; }
.hd-sort i { font-size: var(--g-fs-2xs); color: var(--g-texto-tenue); }
.hd-sort.active i { color: var(--g-primaria); }

/* Telas em etapas (selecionar -> salvar): uma <section class="hd-etapa"> por
   etapa, so uma visivel por vez ([hidden]). Dentro do painel que cabe na
   janela, a etapa herda a coluna flex p/ a tabela rolar por dentro. */
.hd-etapa { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.hd-etapa > form { display: contents; }
.hd-etapa .hd-pagination-bar, .hd-etapa .hd-form-event { flex: 0 0 auto; }
.hd-sel-rotulo { cursor: pointer; margin: 0; }

/* Coluna de acoes das listagens */
.hd-col-acoes { width: 1%; white-space: nowrap; text-align: right; }

/* Texto de apoio. Substitui o .text-secondary do tema antigo; o tamanho
   continua sendo o da tabela ou do paragrafo onde ele esta. */
.hd-suave { color: var(--g-texto-suave); }
/* Equivalente a bg-white do Bootstrap, mas pela superficie do tema. */
.hd-superficie { background: var(--g-superficie); }

/* Divisoria dentro das telas */
.g-shell hr { border: 0; border-top: 1px solid var(--g-borda); margin: var(--g-sp-5) 0; }

/* Quando a section "header" da view traz titulo e acoes ja agrupados. */
.hd-cabecalho-conteudo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-sp-3); flex-wrap: wrap; width: 100%;
}

/* Cartao do Bootstrap: continua no markup de algumas telas (Compliance), o
   visual vem dos tokens. */
.card {
  background: var(--g-superficie);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-sm);
}
.card-header {
  background: var(--g-superficie);
  border-bottom: 1px solid var(--g-borda);
  padding: var(--g-sp-3) var(--g-sp-4);
  border-radius: var(--g-radius-md) var(--g-radius-md) 0 0;
}
.card-body { padding: var(--g-sp-4); }

/* Link que ocupa a celula de uma tabela: herda a cor do texto, nao a da marca. */
.hd-link-tabela { color: var(--g-texto); text-decoration: none; }
.hd-link-tabela:hover { color: var(--g-primaria); text-decoration: underline; }

/* Badge e barra de progresso do Bootstrap, quando aparecem */
.badge { font-weight: var(--g-fw-medio); border-radius: var(--g-radius); }
.progress { background: var(--g-neutro-200); border-radius: var(--g-radius-pill); }
.spinner-border { color: var(--g-primaria); }

/* O site.js desabilita o botao no submit com .disabled (vale tambem em <a>). */
.g-btn.disabled { opacity: 0.5; pointer-events: none; }

/* O overlay global cobre a tela com fundo escuro: o spinner precisa ser claro. */
#hd-global-loading .hd-global-spinner { color: var(--g-superficie); }

/* Coluna do interruptor nas telas de vinculo: so a largura do controle. */
.hd-col-marcador { width: 1%; white-space: nowrap; }

/* Tela cheia: a view desenha a propria superficie (ViewBag.SemPainel). */
.hd-conteudo--cheio { padding: 0; }

/* ---------------------------------------------------------------------
   Menu de contexto do admin (botao direito nos cartoes de painel).
   Vive em Inicio, Items e Paineis; a regra e uma so, aqui.
   --------------------------------------------------------------------- */
.hd-ctx {
  position: fixed;
  z-index: var(--g-z-popover);
  min-width: 210px;
  display: none;
  flex-direction: column;
  padding: var(--g-sp-1);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda);
  border-radius: var(--g-radius-md);
  box-shadow: var(--g-shadow-md);
}
.hd-ctx.open { display: flex; }
.hd-ctx-head {
  display: flex; align-items: center; gap: var(--g-sp-2);
  padding: var(--g-sp-1) var(--g-sp-3) var(--g-sp-2);
  margin-bottom: var(--g-sp-1);
  border-bottom: 1px solid var(--g-borda);
  font-size: var(--g-fs-3xs);
  font-weight: var(--g-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--g-ls-caps);
  color: var(--g-texto-suave);
}
.hd-ctx-head i { color: var(--g-primaria); }
.hd-ctx-item {
  display: flex; align-items: center; gap: var(--g-sp-3);
  padding: var(--g-sp-2) var(--g-sp-3);
  border-radius: var(--g-radius-sm);
  font-size: var(--g-fs-sm);
  font-weight: var(--g-fw-medio);
  color: var(--g-texto);
  text-decoration: none; cursor: pointer;
  transition: background var(--g-dur-rapido) var(--g-ease), color var(--g-dur-rapido) var(--g-ease);
}
.hd-ctx-item i { width: 16px; text-align: center; color: var(--g-texto-tenue); }
.hd-ctx-item:hover { background: var(--g-primaria-suave); color: var(--g-primaria); }
.hd-ctx-item:hover i { color: var(--g-primaria); }

/* ---------------------------------------------------------------------
   Listagens paginadas: a tela cabe na altura da janela. Quem rola e a
   tabela, com o cabecalho fixo; a barra de paginacao fica ancorada no
   rodape do painel. Escopado por :has(.hd-pagination-bar) para valer so
   nas listagens, nunca nos formularios nem na galeria de paineis.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hd-conteudo:has(.hd-pagination-bar) { overflow: hidden; }

  .hd-conteudo:has(.hd-pagination-bar) > .hd-painel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .hd-conteudo:has(.hd-pagination-bar) .g-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .hd-conteudo:has(.hd-pagination-bar) .g-table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: var(--g-z-sticky);
    background: var(--g-superficie);
  }

  .hd-conteudo:has(.hd-pagination-bar) > .hd-painel > .hd-pagination-bar { flex: 0 0 auto; }

  /* Opt-out: telas ricas que tambem paginam (ex.: Compliance) marcam
     .hd-scroll-livre para NAO virar "listagem que cabe no viewport" —
     a pagina inteira rola normalmente e a tabela nao fica presa. */
  .hd-conteudo:has(.hd-scroll-livre) { overflow-y: auto; }
  .hd-conteudo:has(.hd-scroll-livre) > .hd-painel { display: block; height: auto; overflow: visible; }
  .hd-conteudo:has(.hd-scroll-livre) .g-table-scroll { flex: none; overflow-x: auto; }
}

/* Barra de paginacao: tamanho de pagina a esquerda, navegacao a direita. */
.hd-pagination-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-sp-3);
  margin-top: var(--g-sp-4);
  padding-top: var(--g-sp-3);
  border-top: 1px solid var(--g-borda);
}
.hd-pagination-bar .g-pager { padding: 0; }

.hd-pagesize { display: flex; align-items: center; gap: var(--g-sp-2); }
.hd-pagesize .g-label { margin: 0; white-space: nowrap; }
.hd-pagesize .g-select { width: auto; min-width: 74px; }

/* ---------------------------------------------------------------------
   Consultas (mini-Redash): editor de SQL, grade de parametros e tabela
   de resultado.
   --------------------------------------------------------------------- */
.hd-sql {
  font-family: var(--g-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--g-fs-sm);
  line-height: 1.5;
  white-space: pre;
  overflow: auto;
  tab-size: 4;
}

/* Editor de SQL: CodeMirror 5 com o tema "hd" (classe cm-s-hd), montado por
   js/hd-sql-editor.js por cima do textarea. So tokens do DS aqui — cor literal
   nao seria sobrescrita pela marca do tenant. Sem o JS, sobra o .hd-sql acima. */
.CodeMirror.cm-s-hd {
  height: auto;
  font-family: var(--g-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: var(--g-fs-sm);
  line-height: 1.55;
  color: var(--g-texto);
  background: var(--g-superficie);
  border: 1px solid var(--g-borda-forte);
  border-radius: var(--g-radius);
}
.cm-s-hd.CodeMirror-focused { border-color: var(--g-primaria); box-shadow: var(--g-focus-ring); }
/* O textarea de digitacao do CodeMirror e invisivel: o anel de foco e do quadro. */
.cm-s-hd .CodeMirror-scroll textarea:focus-visible { outline: none; }
.cm-s-hd .CodeMirror-gutters { background: var(--g-superficie-alt); border-right: 1px solid var(--g-borda); }
.cm-s-hd .CodeMirror-linenumber { color: var(--g-texto-tenue); }
.cm-s-hd .CodeMirror-cursor { border-left: 2px solid var(--g-texto); }
.cm-s-hd .CodeMirror-selected,
.cm-s-hd.CodeMirror-focused .CodeMirror-selected { background: var(--g-primaria-suave); }
.cm-s-hd .CodeMirror-activeline-background { background: var(--g-fundo); }
.cm-s-hd .CodeMirror-matchingbracket { color: var(--g-primaria); font-weight: var(--g-fw-forte); }
.cm-s-hd .CodeMirror-nonmatchingbracket { color: var(--g-perigo); }
.cm-s-hd .CodeMirror-placeholder { color: var(--g-texto-tenue); }

/* Realce de sintaxe e CATEGORIA, nao estado: cada tipo de token pega uma matiz
   das rampas do DS. Usar --g-sucesso/--g-info aqui dizia "deu certo"/"informacao"
   para uma aspa e um tipo, que e o sentido que o DS da a esses tokens. O erro
   logo abaixo continua em --g-perigo, porque ali o sentido e mesmo de estado. */
.cm-s-hd .cm-keyword { color: var(--g-indigo-800); font-weight: var(--g-fw-semi); }
.cm-s-hd .cm-builtin, .cm-s-hd .cm-type { color: var(--g-indigo-600); }
.cm-s-hd .cm-string, .cm-s-hd .cm-string-2 { color: var(--g-lima-800); }
.cm-s-hd .cm-number, .cm-s-hd .cm-atom { color: var(--g-lilas-800); }
.cm-s-hd .cm-comment { color: var(--g-texto-suave); font-style: italic; }
.cm-s-hd .cm-operator, .cm-s-hd .cm-punctuation, .cm-s-hd .cm-bracket { color: var(--g-texto-suave); }
.cm-s-hd .cm-variable, .cm-s-hd .cm-variable-2, .cm-s-hd .cm-variable-3, .cm-s-hd .cm-property { color: var(--g-texto); }
.cm-s-hd .cm-error { color: var(--g-perigo-ink); }
/* {{ parametro }}: overlay proprio, definido em hd-sql-editor.js. */
.cm-s-hd .cm-hd-parametro {
  color: var(--g-lilas-800);
  font-weight: var(--g-fw-semi);
  background: var(--g-lilas-100);
  border-radius: var(--g-radius-sm);
}

/* Tela cheia (F11): acima do menu, com a pagina travada atras. */
.CodeMirror-fullscreen { z-index: var(--g-z-modal); border-radius: 0; }
body.hd-sql-cheio { overflow: hidden; }
.hd-parametros__cabeca { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-3); }
.hd-parametros__cabeca .g-card__titulo { margin-bottom: 0; }
#tabela-Parametros .g-input, #tabela-Parametros .g-select { height: 30px; font-size: var(--g-fs-xs); }
#tabela-Parametros td { padding: var(--g-sp-1) var(--g-sp-2); }

/* Resultado: rola por dentro com cabecalho fixo; numeros a direita em fonte tabular. */
.hd-resultado .g-table-scroll { max-height: 70vh; overflow: auto; }
.hd-resultado .g-table thead th {
  position: sticky; top: 0; z-index: var(--g-z-sticky);
  background: var(--g-superficie); white-space: nowrap;
}
.hd-resultado .g-table td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.g-table th.hd-col-num, .g-table td.hd-col-num { text-align: right; font-variant-numeric: tabular-nums; }
.hd-nulo { color: var(--g-texto-tenue); font-style: italic; }
.g-table--compacta td, .g-table--compacta th { padding: var(--g-sp-1) var(--g-sp-2); font-size: var(--g-fs-xs); }

/* ---------------------------------------------------------------------
   Loading com a marca Gruppy (_LoadingGruppy.cshtml): anel segmentado
   azul -> magenta girando em volta do chevron "y". Overlay fixo por
   padrao; --embutido fica no fluxo (embed).
   --------------------------------------------------------------------- */
/* O carregamento e o .g-carregando do DS. Aqui so a variante embutida, que corre
   no fluxo da pagina em vez de cobrir a tela (usada no embed de consulta). */
.hd-carregando--embutido {
  position: relative; inset: auto; min-height: 260px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hd-carregando--embutido .g-carregando__cartao { box-shadow: none; background: transparent; }

/* ---------------------------------------------------------------------
   Visualizacoes das consultas (hd-viz.js): abas, corpo, editor, contador,
   detalhes e embed.
   --------------------------------------------------------------------- */
.hd-viz { margin-top: var(--g-sp-3); }
.hd-viz__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2); margin-bottom: var(--g-sp-3); }
.hd-viz__barra .g-topnav__lista { flex-wrap: wrap; }
.hd-viz__barra .g-actions { margin-left: auto; }
.hd-viz__corpo { min-height: 120px; }
.hd-viz__grafico { position: relative; height: 420px; }
.hd-viz__pager { display: flex; align-items: center; justify-content: space-between; gap: var(--g-sp-3); margin-top: var(--g-sp-2); font-size: var(--g-fs-xs); color: var(--g-texto-suave); }
.hd-viz__editor { margin-top: var(--g-sp-3); }
.hd-viz__editor .g-card__titulo { display: flex; align-items: center; gap: var(--g-sp-2); }
.hd-viz__grade .g-input, .hd-viz__grade .g-select { height: 30px; font-size: var(--g-fs-xs); }
.hd-viz__grade td { padding: var(--g-sp-1) var(--g-sp-2); vertical-align: middle; }
.hd-viz__checks { display: flex; flex-wrap: wrap; gap: var(--g-sp-1) var(--g-sp-4); }
.hd-viz__checks .form-check { margin: 0; }
.hd-contador { text-align: center; padding: var(--g-sp-8) var(--g-sp-4); }
.hd-contador__valor { font-size: var(--g-fs-3xl); font-weight: var(--g-fw-forte); color: var(--g-primaria); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-contador__rotulo { margin-top: var(--g-sp-2); font-size: var(--g-fs-md); color: var(--g-texto-suave); }
.hd-contador__alvo { margin-top: var(--g-sp-2); font-size: var(--g-fs-sm); font-weight: var(--g-fw-medio); }
.hd-contador__alvo--alta { color: var(--g-sucesso-ink); }
.hd-contador__alvo--baixa { color: var(--g-perigo-ink); }
.hd-detalhes .g-dl { max-width: 720px; }
.hd-embed { padding: var(--g-sp-3) var(--g-sp-4); }
.hd-embed__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-sp-3); margin-bottom: var(--g-sp-2); }
.hd-embed__titulo { margin: 0; font-size: var(--g-fs-md); font-weight: var(--g-fw-semi); color: var(--g-titulo); }
.hd-embed__meta { font-size: var(--g-fs-2xs); color: var(--g-texto-tenue); white-space: nowrap; }
.hd-embed .hd-resultado .g-table-scroll { max-height: none; }
.hd-embed-url { font-family: var(--g-font-mono, ui-monospace, monospace); font-size: var(--g-fs-xs); word-break: break-all; }

/* Ajuda da URL de embed (Consulta/Executar). O texto corrido virava parede: o
   modelo da URL fica em destaque e a lista de parametros aceitos vai para um
   <details>, aberto so por quem precisa da referencia. */
.hd-embed-modelo {
  margin: 0 0 var(--g-sp-2); padding: var(--g-sp-2) var(--g-sp-3);
  background: var(--g-fundo); border: 1px solid var(--g-borda); border-radius: var(--g-radius-sm);
  font-family: var(--g-font-mono, ui-monospace, monospace); font-size: var(--g-fs-xs);
  color: var(--g-texto); overflow-x: auto; white-space: pre;
}
.hd-embed-modelo b { font-weight: var(--g-fw-semi); color: var(--g-primaria); }
.hd-embed-ref { margin-bottom: var(--g-sp-4); }
.hd-embed-ref > summary {
  cursor: pointer; width: fit-content; padding: var(--g-sp-1) 0;
  font-size: var(--g-fs-2xs); color: var(--g-texto-suave);
}
.hd-embed-ref > summary:hover { color: var(--g-texto); }
.hd-embed-ref[open] > summary { margin-bottom: var(--g-sp-2); }
.hd-embed-ref code { font-family: var(--g-font-mono, ui-monospace, monospace); font-size: var(--g-fs-xs); }
.hd-embed-ref td:first-child { white-space: nowrap; vertical-align: top; }

/* Tabela de resultado (hd-viz.js): barra de filtro/contagem/exportar, zebra, hover,
   nulos discretos, booleanos com icone + texto (nunca so cor), totais e 1a coluna
   congelada. Figuras tabulares so nas colunas numericas. */
.hd-tab__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-sp-2) var(--g-sp-3); margin-bottom: var(--g-sp-2); }
.hd-tab__filtro { max-width: 300px; margin: 0; }
.hd-tab__filtro .g-input { height: 30px; font-size: var(--g-fs-xs); }
.hd-tab__contagem { font-size: var(--g-fs-xs); color: var(--g-texto-suave); }
.hd-tab__acoes { margin-left: auto; display: inline-flex; align-items: center; gap: var(--g-sp-2); }
.hd-tab__porpagina { display: inline-flex; align-items: center; gap: var(--g-sp-1); font-size: var(--g-fs-xs); color: var(--g-texto-suave); margin: 0; }
.hd-tab__porpagina .g-select { width: auto; height: 30px; font-size: var(--g-fs-xs); }
.hd-tab .hd-sort { background: transparent; border: 0; padding: 0; font: inherit; font-weight: inherit; cursor: pointer; }
.hd-tab .hd-sort:focus-visible { outline: none; box-shadow: var(--g-focus-ring); border-radius: var(--g-radius-sm); }
.hd-tab--zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--g-fundo) 55%, var(--g-superficie)); }
.hd-tab tbody tr:hover td { background: var(--g-primaria-suave); }
.hd-tab tfoot td { font-weight: var(--g-fw-semi); border-top: 2px solid var(--g-borda-forte); background: var(--g-superficie); position: sticky; bottom: 0; }
.hd-tab .hd-nulo { color: var(--g-texto-tenue); font-style: normal; }
.hd-tab .hd-neg { font-variant-numeric: tabular-nums; }
.hd-tab--congela th:first-child, .hd-tab--congela td:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--g-superficie);
  box-shadow: 1px 0 0 var(--g-borda);
}
.hd-tab--congela thead th:first-child { z-index: calc(var(--g-z-sticky) + 1); }

/* Densidade confortavel (padrao da tabela de resultado): respiro maior por linha,
   fonte do DS; a compacta continua disponivel no botao da barra e no editor. */
.hd-tab__confortavel td, .hd-tab__confortavel th { padding: var(--g-sp-3) var(--g-sp-4); font-size: var(--g-fs-sm); line-height: 1.35; }
.hd-tab__confortavel tbody td { height: 44px; }
.hd-resultado .g-table td { max-width: 480px; }