/* ============================================================
   Arvo · Intranet Theme
   Paleta Arvo (verde #10261C, areia #F3F1EA, sálvia) pra
   uso em styles inline da intranet via var(--c-...).
   ============================================================ */

:root {
  /* Verde Arvo (primária) */
  --c-primary:   #10261C;
  --c-secondary: #1F3B2C;
  --c-deep:      #0B1C14;

  /* Backgrounds claros (areia) */
  --c-cream:   #F3F1EA;   /* base — papel quente */
  --c-cream-2: #FBFAF6;   /* cards */
  --c-cream-3: #E9E6DC;   /* descanso */

  /* Backgrounds escuros */
  --c-bg-dark:   #10261C;
  --c-bg-dark-2: #0B1C14;

  /* Verde profundo (institucional) */
  --c-marinho:      #0B1C14;
  --c-marinho-soft: #1F3B2C;

  /* Bosque (patrimonial) */
  --c-bosque:      #0B1C14;
  --c-bosque-soft: #1F3B2C;

  /* Sálvia (acento; os nomes --c-gold ficam por compatibilidade) */
  --c-gold:       #B9C9B4;
  --c-gold-soft:  #DCE4D6;
  --c-gold-deep:  #5F7B5B;

  /* Texto */
  --c-text-light:       #10261C;
  --c-text-dark:        #F3F1EA;
  --c-text-muted-light: rgba(16, 38, 28, 0.72);
  --c-text-muted-dark:  rgba(245, 244, 240, 0.72);
  --c-text-faint-light: rgba(16, 38, 28, 0.45);
  --c-text-faint-dark:  rgba(245, 244, 240, 0.45);

  /* Linhas */
  --line-light:    rgba(16, 38, 28, 0.08);
  --line-light-2:  rgba(16, 38, 28, 0.1);
  --line-dark:     rgba(185, 201, 180, 0.18);

  /* Fontes Arvo */
  --f-serif: 'Trirong', Georgia, serif;
  --f-sans:  'Lexend', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --f-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Spacing */
  --nav-h: 64px;
  --max-w-intranet: 1280px;
  --pad-card: 24px;
}

/* Base reset alinhado ao site marketing */
html, body {
  background: var(--c-cream);
  color: var(--c-text-light);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utility helpers que páginas podem usar via className quando útil */
.section-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--c-gold);
}

/* =====================================================================
   RESPONSIVO — intranet / CRM
   Escopo: .intranet-shell (root do shell em pages/index.jsx).
   Sobrescreve estilos inline do React com !important (CSS !important
   vence inline). Detecta nº de colunas pelo trecho "repeat(N" (antes da
   vírgula → imune à normalização de espaços do browser).
   ===================================================================== */

/* Tablet / laptop menor: grids de 3+ colunas viram 2 colunas */
@media (max-width: 1100px) {
  .intranet-shell [style*="grid-template-columns"][style*="repeat(3"],
  .intranet-shell [style*="grid-template-columns"][style*="repeat(4"],
  .intranet-shell [style*="grid-template-columns"][style*="repeat(5"],
  .intranet-shell [style*="grid-template-columns"][style*="repeat(6"],
  .intranet-shell [style*="grid-template-columns"][style*="repeat(7"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Barra superior: as seções aparecem inteiras enquanto couberem; abaixo de
   1180px dão lugar ao botão ☰, que abre o painel .nav-mobile. */
.nav-burger { display: none; }
@media (max-width: 1180px) {
  .nav-secoes { display: none !important; }
  .nav-burger { display: flex !important; }
}

/* Tablet retrato / celular (≤ 860px): tudo em coluna única */
@media (max-width: 860px) {
  /* topbar encolhe o respiro lateral pra não cortar botões em tela estreita */
  .intranet-shell [style*="0 32px"],
  .intranet-shell > header { padding-left: 14px !important; padding-right: 14px !important; }

  /* TODOS os grids internos empilham em 1 coluna */
  .intranet-shell [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* paddings grandes de página/cards encolhem (casa o valor, sem depender do nome da prop) */
  .intranet-shell [style*="36px 48px"] { padding: 18px 14px 44px !important; }
  .intranet-shell [style*="28px 32px"] { padding: 18px 16px !important; }
  .intranet-shell [style*="36px 44px"] { padding: 18px 14px 44px !important; }

  /* tabelas largas (financeiro, comissões) rolam na horizontal sem estourar a tela */
  .intranet-shell table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* Celular pequeno (≤ 480px): respiro extra */
@media (max-width: 480px) {
  .intranet-shell [style*="36px 48px"],
  .intranet-shell [style*="36px 44px"] { padding: 14px 12px 40px !important; }
}


/* =====================================================================
   CORREÇÕES DE LARGURA — set/2026
   ===================================================================== */

/* Trilha de grid não pode ser refém do filho mais largo.
   `1fr` é `minmax(auto,1fr)`: o mínimo da coluna é o min-content de quem
   está dentro, então um chip com nowrap, um CNPJ ou um e-mail comprido
   incha a trilha e empurra o conteúdo para fora do container — foi o que
   cortou o botão "Enviar ao parceiro" no detalhe do negócio, em tela larga,
   onde nenhum breakpoint atua. Zerar o min-width dos filhos devolve à
   trilha a liberdade de encolher, e vale para os 50+ grids da intranet
   sem precisar reescrever um por um. */
.intranet-shell [style*="grid-template-columns"] > * { min-width: 0; }

/* O mesmo problema no sentido inverso: texto sem espaço (CNPJ, e-mail,
   URL) precisa poder quebrar, senão o min-width:0 só transfere o estouro
   para dentro da célula. */
.intranet-shell [style*="grid-template-columns"] > * { overflow-wrap: anywhere; }

/* Notebook menor / janela dividida (≤1100px): os grids de 3+ colunas
   escritos literalmente não eram alcançados pela regra acima, que só casa
   `repeat(3..7`. Estes são os padrões que existem no código.

   Os seletores casam o nome da propriedade e o valor em atributos
   separados de propósito: o React serializa `grid-template-columns:1fr`
   sem espaço depois dos dois-pontos no HTML do servidor, mas o CSSOM
   reescreve com espaço quando o valor muda no cliente. Casar os dois
   pedaços em separado funciona nas duas formas. */
@media (max-width: 1100px) {
  .intranet-shell [style*="grid-template-columns"][style*="1fr 1fr 1fr"],
  .intranet-shell [style*="grid-template-columns"][style*="1fr 1.4fr 1.4fr"],
  .intranet-shell [style*="grid-template-columns"][style*="1fr auto 1fr auto 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------------------------------------------------------------------
   /crm aberto direto (modo standalone de pages/crm.jsx): tem shell
   próprio, com sidebar fixa de 248px. Sem isto, num celular de 360px
   sobravam 112px de conteúdo.
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .crm-standalone { grid-template-columns: 200px 1fr !important; }
}
@media (max-width: 860px) {
  /* Vira coluna única: marca e topo no alto, navegação como faixa que
     rola na horizontal, conteúdo ocupando o resto da altura. */
  .crm-standalone {
    grid-template-columns: 1fr !important;
    grid-template-rows: 56px auto 1fr !important;
  }
  .crm-standalone > :nth-child(1) { display: none !important; }
  .crm-standalone > :nth-child(3) {
    max-height: 56px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .crm-standalone > :nth-child(3) > * { display: flex !important; flex-wrap: nowrap; }
}