/* =====================================================================
   WorldConnect v2 - identidade Leão Group sobre o template Nyvora
   Tokens extraídos das variáveis globais de leaogroup.com
   ===================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Paleta oficial da marca */
  --lg-gold: #D0AC61;         /* dourado principal */
  --lg-gold-dark: #9B8147;    /* dourado escuro (hover/pressed) */
  --lg-gold-light: #E7CE9B;   /* dourado claro */
  --lg-gold-deep: #8F783F;    /* extremo escuro do gradiente da marca */
  --lg-gold-bright: #E8C179;  /* extremo claro do gradiente da marca */
  --lg-light: #F1F1F1;        /* texto principal */
  --lg-gray: #BEBEBE;         /* texto secundário */
  --lg-muted: #7A7A7A;        /* texto de apoio */
  --lg-line: #393939;         /* divisores */
  --lg-surface: #1B1B1B;      /* superfícies */
  --lg-bg: #141414;           /* fundo */
  --lg-navy: #0A1330;         /* azul profundo */
  --lg-teal: #5CBDB9;         /* acento secundário */

  /* Gradiente do CTA principal do site */
  --lg-gradient: linear-gradient(45deg, #8F783F 0%, #E8C179 35%, #8F783F 65%, #E8C179 100%);
  /* Mesma faixa de dourados, mas sem o pico claro — mantém o texto legível em botões */
  --lg-gradient-cta: linear-gradient(45deg, #8F783F 0%, #D0AC61 55%, #9B8147 100%);

  --ny-primary: var(--lg-gold);
  --ny-primary-rgb: 208, 172, 97;
  --ny-primary-2: var(--lg-gold-light);
  --ny-accent: var(--lg-teal);
  --ny-accent-rgb: 92, 189, 185;
  --ny-info: var(--lg-teal);
  --ny-info-rgb: 92, 189, 185;

  --ny-grad-primary: var(--lg-gradient);
  --ny-grad-accent: linear-gradient(135deg, #5CBDB9 0%, #D0AC61 100%);
  --ny-glow: 0 0 0 4px rgba(208, 172, 97, .18);
}

[data-bs-theme="dark"] {
  /* Grafite quente, não preto: os tons do site (#141414/#1B1B1B) ficam a 7 pontos
     um do outro e achatam a tela numa chapa só. Aqui os níveis são separados. */
  --ny-bg: #171614;
  --ny-bg-pattern: radial-gradient(circle at 1px 1px, rgba(208, 172, 97, .07) 1px, transparent 0);
  --ny-card: #221F1C;
  --ny-card-2: #2A2622;
  --ny-hover: #322D28;

  --ny-heading: var(--lg-light);
  --ny-body: #C6C1B8;
  --ny-muted: #8A8378;

  --ny-border: #38332C;
  --ny-border-soft: #2B2724;
  --ny-input-bg: #1C1A18;
  --ny-input-border: #38332C;

  --ny-sidebar-bg: #171614;
  --ny-sidebar-bg-2: #221F1C;
  --ny-sidebar-color: var(--lg-gray);
  --ny-sidebar-active: var(--lg-light);
  --ny-sidebar-caption: #8A8378;

  --ny-topbar-bg: rgba(23, 22, 20, .88);
  --ny-topbar-border: rgba(56, 51, 44, .9);

  --ny-shadow-xs: 0 2px 6px rgba(0, 0, 0, .28);
  --ny-shadow-sm: 0 4px 14px rgba(0, 0, 0, .34);
  --ny-shadow: 0 10px 30px rgba(0, 0, 0, .42);
  --ny-shadow-lg: 0 22px 50px rgba(0, 0, 0, .5);
}

/* Tipografia da marca */
body,
.h-nav-item,
.btn,
.form-control,
.form-label,
.table {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-head h1,
.ny-display-h,
.brand-text,
.font-display {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--ny-heading);
}

/* CTA da marca: gradiente dourado, texto claro, formato pílula */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
  background: var(--lg-gradient-cta);
  background-size: 200% 200%;
  border: 0;
  border-radius: 999px;
  color: var(--lg-light);
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(143, 120, 63, .35);
}

.btn-primary:hover,
.btn-primary:focus {
  background-position: 100% 50%;
  box-shadow: 0 10px 25px rgba(143, 120, 63, .45);
}

.btn-outline-primary {
  --bs-btn-color: var(--lg-gold);
  --bs-btn-border-color: var(--lg-gold);
  --bs-btn-hover-bg: var(--lg-gold-dark);
  --bs-btn-hover-border-color: var(--lg-gold-dark);
  --bs-btn-hover-color: var(--lg-light);
  --bs-btn-active-bg: var(--lg-gold-dark);
  --bs-btn-active-border-color: var(--lg-gold-dark);
  --bs-btn-active-color: var(--lg-light);
  border-radius: 999px;
}

/* Superfícies douradas: o site usa texto claro sobre o gradiente */
.brand-mark,
.h-nav-item.active,
.h-nav-item.show,
.h-nav-item.active:hover,
.h-nav-item.show:hover {
  background: var(--lg-gradient-cta);
  color: var(--lg-light);
  box-shadow: 0 6px 16px rgba(143, 120, 63, .28);
}

/* Logo oficial: a variante clara some no tema claro, entao cada tema usa a sua */
.wc-logo {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

[data-bs-theme="light"] .wc-logo-on-dark,
[data-bs-theme="dark"] .wc-logo-on-light {
  display: none;
}

.wc-logo-lg {
  height: 62px;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .wc-logo { height: 24px; }
  .wc-logo-lg { height: 48px; }
}

/* O template marca presença online no avatar; o app não tem esse conceito */
.user-menu-btn::after {
  display: none;
}

/* São 13 áreas no menu: ícone em cima e rótulo embaixo encurta cada item o
   bastante para caber sem rolagem lateral, quebrando em outra linha se faltar. */
body.layout-horizontal .h-nav {
  height: auto;
  min-height: 54px;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .15rem;
  padding-block: .35rem;
  padding-inline: .5rem;
}

body.layout-horizontal .h-nav .h-nav-item {
  /* Crescem para preencher a faixa de ponta a ponta; o teto evita itens
     desproporcionais em telas ultrawide, onde sobraria largura demais. */
  flex: 1 1 auto;
  min-width: 82px;
  max-width: 240px;
  flex-direction: column;
  gap: .2rem;
  padding: .4rem .35rem;
  font-size: .7rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

body.layout-horizontal .h-nav .h-nav-item i {
  font-size: 1.25rem;
}

/* A faixa é fixa: sem a altura real medida, o conteúdo some atrás dela ao quebrar linha. */
body.layout-horizontal .content {
  padding-top: calc(var(--ny-topbar-h) + var(--wc-nav-h, 54px));
}

/* O template fixa o RGBA do fundo destes badges na paleta original, então o texto
   segue a marca mas o fundo continua roxo/azul. Aqui os dois vêm do mesmo token. */
.badge-soft-primary {
  background: rgba(var(--ny-primary-rgb), .14);
}

.badge-soft-info {
  background: rgba(var(--ny-info-rgb), .14);
}

/* Avatar de iniciais do template, nas cores da marca */
.avatar-init {
  background: var(--lg-gradient-cta);
  color: #1B1B1B;
  font-size: .8rem;
}

.avatar-sm.avatar-init {
  font-size: .72rem;
}

/* No topbar o template desenha um anel dourado com miolo escuro: texto precisa ser claro */
.user-menu-btn .avatar-init {
  color: var(--lg-gold);
}

/* Reserva espaço para o atalho "/" sobreposto ao campo */
.topbar-search input {
  padding-right: 2.25rem;
}

/* O template usa Plus Jakarta Sans nos números; a marca é Montserrat */
.stat-tile .stat-value {
  font-family: 'Montserrat', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.stat-tile .stat-label {
  overflow-wrap: anywhere;
}

/* Gradientes do template re-tingidos: o rosa/laranja original destoa do dourado */
:root {
  --ny-grad-mint: linear-gradient(135deg, #34D399 0%, #0F9D76 100%);
  --ny-grad-rose: linear-gradient(135deg, #E0576A 0%, #B3261E 100%);
  --ny-grad-amber: linear-gradient(135deg, #B8B2A4 0%, #6B6B6B 100%);
  --ny-grad-warm: linear-gradient(135deg, #E0A93B 0%, #B87514 100%);
  --ny-grad-cool: linear-gradient(135deg, #5CBDB9 0%, #2F8F8B 100%);
}

/* Padrão das listagens: estado vazio/carregando e tabela que rola em vez de quebrar */
.wc-state {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--ny-muted);
}

.wc-table td,
.wc-table th {
  white-space: nowrap;
}

.wc-table .wc-cell-name {
  white-space: normal;
  min-width: 220px;
}

/* Só sublinha no hover: numa tabela inteira de links, o sublinhado fixo vira ruído. */
.wc-link {
  color: inherit;
  text-decoration: none;
}

.wc-link:hover {
  color: var(--lg-gold-dark);
  text-decoration: underline;
}

[data-bs-theme="dark"] .wc-link:hover {
  color: var(--lg-gold-light);
}

@media (max-width: 575.98px) {
  /* 16px impede o zoom automático do Safari iOS ao focar o campo */
  .form-control,
  .form-select {
    font-size: 16px;
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .page-link {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .stat-tile {
    padding: 1rem;
  }

  .stat-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 1.1rem;
  }

  .stat-tile .stat-value {
    font-size: 1.45rem;
  }

  .stat-tile .stat-label {
    font-size: .68rem;
    letter-spacing: .04em;
  }
}