/* XMLBox - tokens de tipografia e espacamento.
 *
 * Primeiro (e unico) arquivo CSS proprio do projeto. Carregado em base.html
 * DEPOIS do Bootstrap 5.3.2, para poder sobrescrever as variaveis dele.
 *
 * Objetivo: acabar com os tamanhos avulsos (.72rem, .875rem, 12px, 8.5pt...)
 * espalhados por 47 templates com <style> inline. Codigo novo usa os tokens
 * abaixo; codigo antigo vai migrando por modulo.
 *
 * O que este arquivo NAO faz, de proposito:
 * - Nao troca a familia de fonte. A stack system-ui do Bootstrap continua.
 * - Nao mexe no <body>, so no shell autenticado (.app-main). As telas
 *   publicas (landing, login) ficam intactas.
 * - Nao toca em template de PDF: o xhtml2pdf exige Helvetica/Courier e nao
 *   carrega este arquivo.
 */

:root {
  /* Escala tipografica */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* Pesos do sistema: 400/500/600. --fw-bold (800) e excecao documentada,
     so para o padrao mobile do painel do cliente (painel/*.html), que usa
     800 de proposito para destacar valor em dinheiro - nao usar em telas
     novas fora desse modulo. */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 800;

  --lh-base: 1.5;
  --lh-tight: 1.25;

  /* Barra de filtros: altura e espacamento unicos */
  --filtro-gap: .5rem;
  --filtro-label-fs: var(--fs-xs);
}

/* Escala aplicada so ao shell autenticado (<main class="app-main">).
   Landing e login ficam com o 16px padrao do Bootstrap. */
.app-main {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Utilitarios de tamanho, para substituir font-size inline nos templates */
.fs-xs   { font-size: var(--fs-xs)   !important; }
.fs-sm   { font-size: var(--fs-sm)   !important; }
.fs-base { font-size: var(--fs-base) !important; }
.fs-lg   { font-size: var(--fs-lg)   !important; }
.fs-xl   { font-size: var(--fs-xl)   !important; }
.fs-2xl  { font-size: var(--fs-2xl)  !important; }

.fw-medium { font-weight: var(--fw-medium) !important; }

/* ---- Numeros alinhados ----
 * tabular-nums faz cada digito ocupar a mesma largura, entao coluna de valor,
 * CNPJ e chave de acesso ficam alinhados verticalmente na tabela.
 */
.app-main .table,
.num-tabular,
.chave-acesso,
.font-monospace {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Valor monetario / quantidade: usar junto com text-end */
.num-tabular {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Chave de acesso (44 digitos), recibo, protocolo: mono + tabular.
   O leve espacamento ajuda a conferir digito a digito sem quebrar a coluna. */
.chave-acesso {
  font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  word-break: break-all;
}

/* Documento fiscal numerico (CNPJ, CPF, IE, numero da nota): mesma familia do
   texto, mas com digitos de largura fixa. */
.doc-numerico {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =====================================================================
 * Componentes padrao: campo de data (.xb-date) e barra de filtro
 * (.filtro-bar). Usados pelas macros de app/templates/_forms.html.
 * ===================================================================== */

/* O icone do calendario e o botao bi-calendar-event a direita. O indicador
   nativo do WebKit/Blink sai para nao aparecerem dois icones. O Firefox nao
   expoe seletor para o dele; la convivem o nativo e o nosso. */
.xb-date input[type="date"]::-webkit-calendar-picker-indicator,
.xb-date input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 0;
  padding: 0;
  margin: 0;
}

/* Altura identica a dos demais controles sm. Sem isso o input de data fica
   mais alto que o select ao lado no Safari/iOS. */
.xb-date input[type="date"],
.xb-date input[type="month"] {
  min-height: calc(1.5em + .5rem + 2px);
  font-variant-numeric: tabular-nums;
}

.xb-date .btn {
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}
.xb-date .btn:hover { color: var(--bs-primary); }

/* Prefixo "De"/"Ate" do date_range_field: estreito, so para orientar. */
.xb-date-prefixo {
  font-size: var(--fs-xs);
  padding-left: .4rem;
  padding-right: .4rem;
  color: var(--bs-secondary-color);
}

/* Barra de filtro: mesma altura, mesmo rotulo, mesmo espacamento em todas as
   telas. O wrapper e <form class="card mb-3 filtro-bar"> com .card-body py-2
   dentro (card + card-body na MESMA div dobra o padding). */
.filtro-bar .form-label {
  font-size: var(--filtro-label-fs);
  font-weight: var(--fw-semibold);
  margin-bottom: .15rem;
  color: var(--bs-secondary-color);
}

.filtro-bar .form-control-sm,
.filtro-bar .form-select-sm,
.filtro-bar .btn-sm {
  min-height: calc(1.5em + .5rem + 2px);
}

.filtro-bar .row > [class*="col-"] { min-width: 0; }

.filtro-bar .xb-atalhos-btn {
  font-size: var(--fs-xs);
  line-height: 1;
}

/* No celular os atalhos e o par De/Ate empilham; o botao Filtrar ocupa a
   largura toda para nao ficar espremido. */
@media (max-width: 575.98px) {
  .filtro-bar [data-filtro-submit],
  .filtro-bar .btn-outline-secondary[href] {
    flex: 1 1 auto;
  }
}
