/* ============================================================
   RDG · Intranet Theme
   Tokens espelhados do site marketing (public/styles.css) pra
   uso em styles inline da intranet via var(--c-...).
   ============================================================ */

:root {
  /* Café (primária) */
  --c-primary:   #2a1f17;
  --c-secondary: #38291d;
  --c-deep:      #1f160f;

  /* Backgrounds claros */
  --c-cream:   #FBF8F0;   /* base — papel quente */
  --c-cream-2: #F8F4E9;   /* cards */
  --c-cream-3: #EFE3CB;   /* descanso */

  /* Backgrounds escuros */
  --c-bg-dark:   #2a1f17;
  --c-bg-dark-2: #1f160f;

  /* Marinho (institucional) */
  --c-marinho:      #131720;
  --c-marinho-soft: #2B3247;

  /* Bosque (patrimonial) */
  --c-bosque:      #1A201E;
  --c-bosque-soft: #2E3835;

  /* Champagne (gold refinado) */
  --c-gold:       #D9BD86;
  --c-gold-soft:  #ECD7AC;
  --c-gold-deep:  #B89A5F;

  /* Texto */
  --c-text-light:       #1a140e;
  --c-text-dark:        #F5F4F0;
  --c-text-muted-light: rgba(26, 20, 14, 0.72);
  --c-text-muted-dark:  rgba(245, 244, 240, 0.72);
  --c-text-faint-light: rgba(26, 20, 14, 0.45);
  --c-text-faint-dark:  rgba(245, 244, 240, 0.45);

  /* Linhas */
  --line-light:    rgba(26, 20, 14, 0.08);
  --line-light-2:  rgba(26, 20, 14, 0.1);
  --line-dark:     rgba(199, 151, 89, 0.18);

  /* Fontes (mesmas do site) */
  --f-serif: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
  --f-sans:  'Jost', -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;
  }
}

/* Backdrop do drawer: invisível no desktop, só aparece em modo gaveta (≤860) */
.intranet-backdrop { display: none; }

/* Tablet retrato / celular (≤ 860px): layout em coluna única + sidebar em drawer */
@media (max-width: 860px) {
  /* conteúdo ocupa a largura toda; coluna do menu colapsa (logo some) */
  .intranet-shell { grid-template-columns: 0 1fr !important; }

  /* sidebar vira gaveta sobreposta, fora do fluxo do grid */
  .intranet-shell > aside {
    position: fixed !important;
    top: 68px; left: 0; bottom: 0;
    width: min(82vw, 290px);
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 8px 0 40px rgba(0,0,0,.4);
  }
  /* aberta quando o menu está ligado (inline grid contém "248px") */
  .intranet-shell[style*="248px"] > aside { transform: translateX(0); }

  /* escurece o conteúdo atrás da gaveta e captura o toque pra fechar */
  .intranet-backdrop {
    display: block;
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45);
    z-index: 1199;
    animation: intranet-bd-in .2s ease;
  }

  /* topbar encolhe o respiro lateral pra não cortar botões em tela estreita */
  .intranet-shell [style*="0 32px"] { 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; }
}

@keyframes intranet-bd-in { from { opacity: 0; } to { opacity: 1; } }