/* v27g · Override da paleta Alpargatas para a paleta navy unificada.
   Substitui o azul vibrante #0597F2 nas páginas internas do v27 por navy #2B6394. */

:root {
  /* Sobrescreve as variáveis · propaga em quase tudo que v27 css usa */
  --alpargatas-blue: #2B6394;
  --alpargatas-light-blue: #6CA5D5;
}

/* Override de literais #0597F2 e #0597f2 que não usam as variáveis */
.app-container.teams-layout .stat-value,
.app-container.teams-layout .page-link,
.app-container.teams-layout a,
.app-container.teams-layout .link {
  color: #2B6394;
}

/* Bordas/destaque com #0597F2 literal */
.app-container.teams-layout [class*="card"][style*="border-left"],
.app-container.teams-layout .week-card-highlight {
  border-left-color: #2B6394 !important;
}

/* ==== BOTÕES · seguem a COR DO PRODUTO (--product-accent), como os cabeçalhos ====
   Primários = fundo na cor do produto, texto branco, hover levemente escurecido.
   Degrada para navy (#2B6394) onde --product-accent não estiver setado / sem color-mix. */
.app-container.teams-layout .btn-solicitar,
.app-container.teams-layout .btn-aprovar,
.app-container.teams-layout .btn-primary,
.app-container.teams-layout .submit-btn {
  background-color: var(--product-accent, #2B6394) !important;
  color: #fff !important;
  border-color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .btn-solicitar:hover,
.app-container.teams-layout .btn-aprovar:hover,
.app-container.teams-layout .btn-primary:hover,
.app-container.teams-layout .submit-btn:hover {
  background-color: color-mix(in srgb, var(--product-accent, #2B6394) 86%, #000000) !important;
}
/* Secundários: borda + texto realçam na cor do produto no hover. */
.app-container.teams-layout .btn-secondary:hover,
.app-container.teams-layout .filter-tab:hover {
  border-color: var(--product-accent, #2B6394) !important;
  color: var(--product-accent, #2B6394) !important;
}

/* ==== BOTÕES PRIMÁRIOS DE MARCA · ampliação (seguem --product-accent) ====
   Classes que estavam com azul/navy FIXO (var(--alpargatas-blue), #0597F2,
   #0078d4, #4f46e5 etc.) e agora acompanham o produto ativo, como os cabeçalhos
   e os botões já cobertos acima. NÃO inclui vermelho/verde/cinza (preservados). */
.app-container.teams-layout .admin-btn,
.app-container.teams-layout .filter-btn-gestor,
.app-container.teams-layout .dropdown-month-btn-gestor.active,
.app-container.teams-layout .dropdown-header-gestor button,
.app-container.teams-layout .tpc-action-btn--primary,
.app-container.teams-layout .expand-btn:not(.expanded),
.app-container.teams-layout .tk-btn:not(.is-ghost),
.app-container.teams-layout .tk-punch-btn {
  background-color: var(--product-accent, #2B6394) !important;
  color: #fff !important;
  border-color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .admin-btn:hover,
.app-container.teams-layout .filter-btn-gestor:hover,
.app-container.teams-layout .dropdown-header-gestor button:hover,
.app-container.teams-layout .tpc-action-btn--primary:hover,
.app-container.teams-layout .tk-btn:not(.is-ghost):hover,
.app-container.teams-layout .tk-punch-btn:hover {
  background-color: color-mix(in srgb, var(--product-accent, #2B6394) 86%, #000000) !important;
  border-color: color-mix(in srgb, var(--product-accent, #2B6394) 86%, #000000) !important;
}
/* expand-btn:hover usa o claro do produto (era --alpargatas-light-blue).
   .expand-btn.expanded continua VERDE (#22c55e) · estado de sucesso preservado. */
.app-container.teams-layout .expand-btn:not(.expanded):hover {
  background-color: color-mix(in srgb, var(--product-accent, #2B6394) 70%, #ffffff) !important;
}
/* .admin-btn.ghost continua NEUTRO (#333 / borda neutra) · não pintar. */

/* ==== TOGGLES (estado "ligado") · cor do produto (eram azul de marca) ==== */
.app-container.teams-layout .flag-toggle input:checked + .flag-slider,
.app-container.teams-layout .pm-toggle-wrap input:checked + .pm-toggle-slider {
  background-color: var(--product-accent, #2B6394) !important;
}

/* ==== SECUNDÁRIOS / GHOST / HOVER de marca · texto na cor do produto ==== */
.app-container.teams-layout .tk-btn.is-ghost,
.app-container.teams-layout .nav-btn:hover,
.app-container.teams-layout .dropdown-month-btn-gestor:hover {
  color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .dropdown-month-btn-gestor:hover {
  border-color: var(--product-accent, #2B6394) !important;
}

/* ==== TABS / CHIPS / CTA (v27g-teams) · acompanham o produto ====
   Estavam fixos em navy #2B6394. Tab/chip ativo = realce na cor do produto;
   hover = texto/borda na cor do produto; cat/ns-cta = link na cor do produto. */
.app-container.teams-layout .tab.active {
  color: var(--product-accent, #2B6394) !important;
  border-bottom-color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .tab:hover {
  color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .chip.active {
  background-color: var(--product-accent, #2B6394) !important;
  color: #fff !important;
  border-color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .chip:hover {
  color: var(--product-accent, #2B6394) !important;
  border-color: var(--product-accent, #2B6394) !important;
}
.app-container.teams-layout .cat-cta,
.app-container.teams-layout .ns-cta {
  color: var(--product-accent, #2B6394) !important;
}

/* Profile dot do role employee (era #0597F2) */
.app-container.teams-layout .nav-profile-dot.employee { background: #2B6394 !important; }

/* Status pills/badges que usam alpargatas-blue */
.app-container.teams-layout .role-badge-small.role-employee {
  background: rgba(43,99,148,.12) !important;
  color: #2B6394 !important;
}

/* Headers de cards/seções que usavam #0597F2 · agora navy */
.app-container.teams-layout .section-title,
.app-container.teams-layout .pie-card h3,
.app-container.teams-layout .chart-card h3,
.app-container.teams-layout .stats-card h3,
.app-container.teams-layout .week-header,
.app-container.teams-layout .day-card-header {
  color: #2B6394 !important;
}

/* ==== CABEÇALHOS DE TABELA · DELICADOS + na COR DO PRODUTO (--product-accent) ====
   Antes: barra sólida navy com texto branco (pesado). Agora: fundo claro com leve tinta
   do produto, texto na cor do produto, borda inferior fina de acento e tipografia refinada
   (maiúsculas pequenas + tracking). A cor acompanha o produto ativo (product-bar seta
   --product-accent). Degrada para navy onde color-mix não existir. */
.app-container.teams-layout th,
.app-container.teams-layout .team-table thead,
.app-container.teams-layout .team-table th,
.app-container.teams-layout table thead th {
  background: color-mix(in srgb, var(--product-accent, #2B6394) 8%, #ffffff) !important;
  color: var(--product-accent, #2B6394) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-bottom: 2px solid color-mix(in srgb, var(--product-accent, #2B6394) 32%, #ffffff) !important;
}
/* Casos que já eram claros (justificar-falta, pm-table): alinha o texto à cor do produto. */
.app-container.teams-layout .justificar-falta-page .team-table thead {
  background-color: color-mix(in srgb, var(--product-accent, #2B6394) 6%, #ffffff) !important;
}
.app-container.teams-layout .justificar-falta-page .team-table th,
.app-container.teams-layout .pm-table thead th {
  color: var(--product-accent, #2B6394) !important;
  border-bottom-color: color-mix(in srgb, var(--product-accent, #2B6394) 32%, #ffffff) !important;
}

/* H1 banner em pages-relatórios (era #1e40af) · agora navy */
.app-container.teams-layout h1 {
  /* só onde for usado como banner; preserve color em h1 sem background */
}
.app-container.teams-layout .container > h1,
.app-container.teams-layout .report-page h1 {
  background: #2B6394 !important;
  color: #fff !important;
}

/* Borda preta nos relatórios RH · mantém */
.app-container.teams-layout #relatorioAderenciaTable thead tr,
.app-container.teams-layout #relatorioStatusJustificativasTable thead tr {
  border-top-color: #555 !important;
}

/* Calendário · dias da semana (header) e bordas */
.app-container.teams-layout .calendar .calendar-day-name,
.app-container.teams-layout .calendar-historico .calendar-day-name {
  color: #2B6394 !important;
  border-bottom-color: #2B6394 !important;
}

/* Variáveis "azul" do bloco standalone (linha 3014 do style.css) */
.app-container.teams-layout {
  --azul: #2B6394 !important;
  --presencial: #2B6394 !important;
}

/* page-title das páginas v27 internas */
.app-container.teams-layout .page-view h1,
.app-container.teams-layout .page-view .page-title {
  color: #2B6394 !important;
}

/* Tabs ativas dentro das páginas v27 · sublinhado/realce na cor do produto */
.app-container.teams-layout .filter-tab.active,
.app-container.teams-layout .tab-button.active {
  border-bottom-color: var(--product-accent, #2B6394) !important;
  color: var(--product-accent, #2B6394) !important;
}

/* Botão de período "Mês" ativo · cor do produto */
.app-container.teams-layout .btn-mes.active,
.app-container.teams-layout .btn-mes:hover {
  background-color: var(--product-accent, #2B6394) !important;
  color: white !important;
}

/* Bordas laterais em cards (era #0597F2) */
.app-container.teams-layout .week-card.current,
.app-container.teams-layout .day-card.today {
  border-left: 4px solid #2B6394 !important;
}

/* Gradientes do header e nav-dashboard-pin que ainda usam o gradient antigo */
.app-container.teams-layout .nav-dashboard-pin {
  background: transparent !important;
}

/* Cores de texto em destaque (era var(--alpargatas-blue) que agora é navy) */
.app-container.teams-layout .highlight-blue,
.app-container.teams-layout .text-primary {
  color: #2B6394 !important;
}

/* Status: cor verde fica · cor azul vira navy */
.app-container.teams-layout .status-badge.status-info {
  background-color: rgba(43,99,148,.12);
  color: #2B6394;
}

/* Hover de elementos clicáveis genéricos */
.app-container.teams-layout button:not(.persona-opt):hover {
  /* sem overrides agressivos · cada botão controla */
}

/* Indicadores e markers de gráficos · se houver azul vibrante */
.app-container.teams-layout svg.chart [stroke="#0597F2"],
.app-container.teams-layout svg.chart [fill="#0597F2"] {
  stroke: #2B6394 !important;
  fill: #2B6394 !important;
}