/* =====================================================================
   SANTA CLARA — Guia da marca para devs v1.0 aplicado ao ERP
   EM PRODUÇÃO desde 01/09/2026 (aprovado; veio do www-teste como
   paleta-teste.css). Rebrand MixIdeal — ver docker-compose (mixideal.*).
   ---------------------------------------------------------------------
   Carregado DEPOIS do styles.min.css, então vence na cascata.

   Os blocos abaixo são independentes. Para desligar qualquer um, basta
   comentá-lo — os outros continuam funcionando.

   >>> O QUE ESTE ARQUIVO NÃO TOCA, DE PROPÓSITO: as cores dos gráficos.
   Verificado no código: as séries dos gráficos usam hex fixo nas próprias
   páginas (ex.: relatorio.php:1293 tem COLORS com 12 cores; vendas_cliente
   usa CORES.verde/amarelo/vermelho). Elas NÃO derivam de --primary, então
   nada aqui as altera. As variáveis --success/--danger/--warning/--info
   também ficam intocadas: carregam significado nos relatórios e metas.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=KoHo:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   BLOCO 0 — Tokens da marca, copiados do guia (página 05)
   Ficam aqui para o resto do arquivo se referir a eles por nome.
   --------------------------------------------------------------------- */
:root {
  --brand:        #000B6B;   /* Azul Santa Clara — principal */
  --brand-rgb:    0, 11, 107;/* o mesmo #000B6B em decimal, para rgba() */
  --brand-escuro: #00073F;   /* hover do azul, um degrau mais escuro */
  --brand-pink:   #EBA4B3;   /* Rosa — apoio  */
  --brand-lilac:  #D4DBFC;   /* Azul Claro — apoio */
  --brand-cream:  #FFFFFF;   /* Branco — base */

  --font-display: "Philosopher", Georgia, serif;   /* 700 */
  --font-body:    "KoHo", "Inter", sans-serif;     /* 400 */

  --radius-pill:  9999px;
  --radius-card:  1.5rem;
}

/* ---------------------------------------------------------------------
   BLOCO 1 — CORES
   A template monta tudo a partir destes três números "R, G, B" (sem #),
   porque os usa dentro de rgba() para gerar as transparências
   --primary01 .. --primary09. Por isso os valores vão em decimal.
   --------------------------------------------------------------------- */
:root {
  --primary-rgb:    0, 11, 107;     /* #000B6B  Azul Santa Clara */
  --secondary-rgb:  235, 164, 179;  /* #EBA4B3  Rosa            */

  /* Os quatro de estado NÃO mudam. Ver aviso no topo do arquivo.
     --success-rgb / --danger-rgb / --warning-rgb / --info-rgb       */

  /* O fundo do corpo também fica como está (#F0F1F7). Trocar por branco
     puro faria os cards brancos sumirem contra o fundo, e mexer nele
     aqui quebraria o modo escuro, que redefine esta mesma variável. */
}

/* Modo escuro: #000B6B é escuro demais para aparecer sobre fundo escuro.
   Usa um azul da mesma família, clareado até dar contraste de 5.8:1 com
   texto branco. Só entra em ação se alguém ligar o tema escuro. */
[data-theme-mode=dark] {
  --primary-rgb: 76, 91, 199;   /* #4C5BC7 */
}

/* ---------------------------------------------------------------------
   BLOCO 2 — Legibilidade sobre o rosa   [NÃO REMOVER]
   A template escreve em BRANCO sobre a cor secundária
   (styles.css:2729 → .btn-secondary { color: #fff }). Branco sobre
   #EBA4B3 dá contraste de 2.0:1 — ilegível, reprova em qualquer critério
   de acessibilidade. O próprio guia manda o contrário: "bg-brand-pink
   text-brand" (página 03) e "rosa e lilás nunca para texto pequeno"
   (página 02). Navy sobre o rosa dá 8.3:1.
   --------------------------------------------------------------------- */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.badge.bg-secondary,
.bg-secondary:not(.bg-opacity-10):not(.bg-opacity-25) {
  color: var(--brand) !important;
}

/* ---------------------------------------------------------------------
   BLOCO 3 — TIPOGRAFIA (guia, página 01)
   Philosopher Bold nos títulos, categorias e itens de menu.
   KoHo Regular no corpo.
   --------------------------------------------------------------------- */
:root {
  --default-font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.main-content-label,
.side-menu__label,
.slide-menu .side-menu__item,
.page-title {
  font-family: var(--font-display) !important;
  font-weight: 700;
}

/* Números de tabela em largura fixa: sem isto as colunas de valores
   "dançam" a cada atualização, porque a KoHo tem dígitos proporcionais. */
.table td, .table th,
.dataTables_wrapper td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------------------------------------------------------------------
   BLOCO 4 — BOTÕES PÍLULA (guia, página 03)
   Raio 9999px, padding mínimo 14px 28px, texto em Philosopher Bold.
   Exclui os botões que a template encaixa em grupos ou em campos de
   busca: pílula ali deixa buracos entre as peças encostadas.
   --------------------------------------------------------------------- */
.btn:not(.btn-icon):not(.btn-close):not(.dropdown-toggle-split),
.btn-group > .btn:only-child {
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.btn-sm {
  padding: 9px 20px !important;
  font-size: 13px !important;
}

.btn:hover {
  opacity: .9;
}

/* Botões dentro de grupo e de input-group continuam retos nas junções */
.btn-group > .btn:not(:only-child),
.input-group > .btn {
  border-radius: 0;
  padding: 10px 18px;
}
.btn-group > .btn:not(:only-child):first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.btn-group > .btn:not(:only-child):last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }

/* ---------------------------------------------------------------------
   BLOCO 5 — FORMAS (guia, página 04)
   Cards com raio generoso. Sem cantos retos.
   --------------------------------------------------------------------- */
.card,
.card.custom-card {
  border-radius: var(--radius-card);
}
.card .card-header:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.card .card-footer:last-child  { border-radius: 0 0 var(--radius-card) var(--radius-card); }

.form-control, .form-select, .input-group > .form-control {
  border-radius: .75rem;
}

/* ---------------------------------------------------------------------
   BLOCO 6 — TABELAS
   O guia não especifica tabela (foi escrito para o site institucional).
   Fala de tabela num ponto só, página 02: "Rosa e lilás são para
   destaques, ilustrações, ícones e hover". Hover de linha é exatamente
   isso, então o realce de linha passa a usar o lilás da marca.

   Antes: rgba(--primary, .05) — pastilha do primário, quase invisível
   (#F2F3F9 sobre branco). Agora: o #D4DBFC do guia, que é um realce
   de verdade. Texto padrão sobre o lilás dá 8.8:1 de contraste.

   As regras de hover moram dentro do <style> das próprias páginas, que
   carrega DEPOIS deste arquivo. Por isso a especificidade extra (html
   body ...) — sem ela o !important da página venceria.

   NÃO mexe em: cabeçalho de tabela (#f3f4f6, cinza neutro, combina com
   o azul) nem nas linhas de status (laranja/verde/vermelho em
   atualizacao_sistema e produtos_mais_vendidos) — essas carregam
   significado, mesma razão de não tocar nas cores de gráfico.
   --------------------------------------------------------------------- */
:root {
  --brand-lilac-rgb: 212, 219, 252;   /* #D4DBFC */
}

/* Tabelas da template */
.table-hover > tbody > tr:hover > *,
.table.table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: rgba(var(--brand-lilac-rgb), .55);
}

/* Tabelas próprias dos relatórios (rank-table / cat-table) */
html body .rank-table tbody tr:hover,
html body .cat-table  tbody tr:hover {
  background: rgba(var(--brand-lilac-rgb), .55) !important;
}

/* Linha selecionada: lilás cheio, para distinguir do hover */
html body .rank-table tbody tr.row-active,
html body .cat-table  tbody tr.row-active {
  background: rgb(var(--brand-lilac-rgb)) !important;
}

/* ---------------------------------------------------------------------
   BLOCO 7 — TAMANHO DO LOGO
   A template trava o logo do menu em height: 2rem (32px), medida
   calibrada para um logo LARGO. O antigo era 2.42:1; o MixIdeal é 1.41:1
   (quase quadrado, "Mix" sobre "Ideal"). Com o mesmo limite de altura o
   novo saía 42% mais estreito — ~45px num menu de 230px. Daí a impressão
   de que não tinha aumentado.

   ATENÇÃO ao mexer: o cabeçalho do menu é `position: fixed`, ou seja,
   ele FLUTUA sobre o menu em vez de empurrá-lo. Quem afasta os itens é o
   `margin-block-start: 3.72rem` do .main-sidebar (styles.css:17015).
   As duas medidas TÊM que andar juntas — se só o cabeçalho crescer, os
   primeiros itens do menu somem embaixo dele. Por isso as duas saem da
   mesma variável abaixo.

   Para ajustar o tamanho, mexa só em --logo-altura.
   --------------------------------------------------------------------- */
:root {
  --logo-altura:    5.5rem;                        /* 88px -> ~124px de largura */
  --menu-cabecalho: calc(var(--logo-altura) + 1.5rem);  /* logo + respiro */
}

.app-sidebar .main-sidebar-header {
  height: var(--menu-cabecalho) !important;
}

.app-sidebar .main-sidebar-header .header-logo img {
  height: var(--logo-altura) !important;
  line-height: normal !important;
  width: auto;
  max-width: 85%;
  object-fit: contain;
}

/* O par obrigatório da regra acima. Sem isto o menu fica sob o cabeçalho. */
.main-sidebar {
  margin-block-start: var(--menu-cabecalho) !important;
}

/* Menu recolhido: a barra fica estreita, logo e cabeçalho encolhem junto */
[data-toggled$="-close"]  .app-sidebar .main-sidebar-header,
[data-toggled$="-closed"] .app-sidebar .main-sidebar-header {
  height: 3.75rem !important;
}
[data-toggled$="-close"]  .app-sidebar .main-sidebar-header .header-logo img,
[data-toggled$="-closed"] .app-sidebar .main-sidebar-header .header-logo img {
  height: 2.25rem !important;
}
[data-toggled$="-close"]  .main-sidebar,
[data-toggled$="-closed"] .main-sidebar {
  margin-block-start: 3.75rem !important;
}

.desktop-logo, .desktop-dark, .desktop-white { max-width: 100%; }

/* ---------------------------------------------------------------------
   BLOCO 8 — BOTÕES PRÓPRIOS DAS PÁGINAS
   O BLOCO 4 arredondou os botões da template, mas várias páginas criaram
   botão próprio com raio fixo e !important, que escapava dele. O caso
   mais visível é o `.btn-roxo-custom` (clientes, romaneio_ver, meta
   gerencial e mais 4 telas): fixava `border-radius: 4px`, então mesmo
   depois de virar azul continuava quadrado no meio de botões pílula.

   A cor já foi resolvida na origem — as 56 ocorrências de #845adf nessas
   telas passaram a usar var(--brand). Aqui fica só o FORMATO, centralizado,
   para não ter que editar sete arquivos de novo se a régua mudar.

   Os botões do relatório (.btn-rel-*) usam --rel-radius-sm, uma variável
   própria da página, então basta redefini-la.
   --------------------------------------------------------------------- */
.btn-roxo-custom,
.btn-corrigido,
.btn-top-toggle,
.btn-cat-clear {
  border-radius: var(--radius-pill) !important;
  padding-inline: 20px !important;
}

/* A régua dos botões do relatório */
:root {
  --rel-radius-sm: var(--radius-pill);
}