/* =========================================================
ARQUIVO DE ESTILOS ADICIONAIS PARA A UI REFORMULADA
Este arquivo complementa o style.css existente com novas
definições para o layout vertical de navegação, campos de
busca e suporte a arrastar‑e‑soltar.
========================================================== */

/* Highlight the upload drop zone when files are dragged over it */
.file-input-wrapper.dragover .file-input-display {
  border-color: var(--primary-500);
  background-color: var(--primary-100);
}

/* Style for the search inputs used to filter long select lists */
.employee-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-base);
  background: var(--gray-50);
  transition: all var(--transition-fast);
}

.employee-search-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-500);
  background: var(--gray-100);
}

/* =========================================================
  TOOLTIP CUSTOMIZADO
  ========================================================= */
.tooltip {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0.95;
}

/* Tema escuro elegante */
.tooltip-dark .tooltip-inner {
  background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
  color: #fff;
  border-radius: var(--radius-md);
}

/* Tema claro */
.tooltip-light .tooltip-inner {
  background: #fff;
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

/* Tema moderno (azul) */
.tooltip-modern .tooltip-inner {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  border-radius: var(--radius-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Garante que a seta herde a cor do fundo */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: inherit;
}

/* =========================================================
   LAYOUT REFORMULADO COM BARRA LATERAL
   A barra lateral vertical substitui a navegação superior.
   Ela permanece fixa e ocupa toda a altura após o cabeçalho.
   O conteúdo principal desloca‑se para a direita.
========================================================== */
/*
  Barra lateral padrão.
  A largura foi ampliada para acomodar textos mais longos, evitando truncamento
  nos rótulos dos itens de menu. Quando a barra estiver recolhida, a largura
  não se aplica devido ao translateX definido na classe `.collapsed`.
*/
.sidebar {
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  width: 250px;
  background: var(--gray-50);
  border-right: 1px solid var(--gray-200);
  padding-top: var(--space-4);
  overflow-y: auto;
  z-index: 1000;
}

.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li + li {
  margin-top: var(--space-1);
}

/*
 * Itens da barra lateral
 * Ajustamos o espaçamento interno (gap) para não ficar tão grande e permitimos
 * que a badge seja posicionada à direita usando margin-left:auto. O display
 * flex garante alinhamento vertical entre o ícone, o texto e a badge.
 */
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-nav .nav-link .badge {
  margin-left: auto;
  /* Estilo consistente para as contagens (badges) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link:hover {
  background: var(--primary-100);
  color: var(--primary-700);
}

/*
 * Permitir quebra de linha nos textos dos itens da barra lateral.
 * Por padrão, alguns estilos globais aplicam `white-space: nowrap` em links
 * ou botões, o que faz com que textos longos sejam cortados com overflow.
 * A regra abaixo remove esse comportamento para os rótulos dos links do
 * menu lateral, permitindo que o texto flua para a próxima linha.
 */
.sidebar-nav .nav-link span {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Ajusta o conteúdo principal para acomodar a barra lateral */
/*
 * O conteúdo principal deve deslocar-se para a direita para acomodar a barra lateral.
 * O valor de 250px corresponde à largura definida na `.sidebar`. Ao ajustar aqui,
 * evitamos que o início do conteúdo fique oculto pela barra.
 */
.main-content {
  margin-left: 250px;
  padding: var(--space-4);
}

/* Transição suave para ocultar/exibir a barra lateral */
.sidebar {
  transition: transform var(--transition-normal);
}

/* Estado recolhido da barra lateral (translateX negativo) */
.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Ajuste do conteúdo principal quando a barra está recolhida */
.main-content.sidebar-collapsed {
  margin-left: 0 !important;
}

/* Botão de alternância da barra lateral */
.sidebar-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--primary-700);
  background: var(--primary-100);
  margin-right: var(--space-3);
  transition: background var(--transition-fast);
}

.sidebar-toggle:hover {
  background: var(--primary-200);
}

/* Em telas pequenas, a barra lateral torna-se horizontal e opcional */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
  }
  .main-content {
    margin-left: 0;
  }
}

/* =========================================================
   TOOLTIP CUSTOMIZADO
   ========================================================= */
.tooltip {
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0.95;
}

/* Tema escuro elegante */
.tooltip-dark .tooltip-inner {
  background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
  color: #fff;
  border-radius: var(--radius-md);
}

/* Tema claro */
.tooltip-light .tooltip-inner {
  background: #fff;
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

/* Tema moderno (azul) */
.tooltip-modern .tooltip-inner {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  border-radius: var(--radius-lg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Garante que a seta herde a cor do fundo */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: inherit;
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: inherit;
}

/* Esconde a linha do tempo de status (mantém a barra “Aguardando arquivos/Processando…”) */
#statusList,
.status-timeline {
  display: none !important;
}

/* CSS PARA O PAINEL DE CONFIGURAÇÃO DE VALORES DA AJUDA DE CUSTO - ACT */

/* =========================
   PAINEL ACT – TOGGLE
   ========================= */

.act-config-wrapper {
  margin-top: .25rem;
}

.act-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .4rem;
  margin-bottom: .25rem;
  font-size: .8rem;
  color: #6b7280;
}

/* Os estilos .act-accordion, .act-accordion-button, .act-card (antigo), .act-subtitle,
   .act-table, .act-password-wrapper (antigo), .act-password-input (antigo), .act-password-btn
   foram eliminados por serem obsoletos para a nova estrutura de modal e cards. */

/* =========================
   NOVOS ESTILOS PARA O MODAL ACT
   ========================= */

/* Estilo para a nova seção de Senha/Desbloqueio */
#actPasswordSection {
  background: var(--light, #f8f9fa) !important;
  transition: all 0.3s ease;
  /* Garante que o input e botão fiquem alinhados */
  border-color: var(--gray-300); 
}

#actPasswordSection:focus-within {
  /* Foco azul mais suave ao interagir com a senha */
  border-color: var(--primary-500);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#actPasswordSection .act-password-input {
  /* Reset de estilo do input dentro da nova caixa */
  border: 0 !important;
  background: transparent !important;
}

/* Estilo para o cartão de Edição (novo) */
.act-card {
    border-radius: .75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Estilo para os cards de valores atuais (novo) */
#actValuesDisplay .card {
  border: 1px solid var(--gray-300);
  transition: all 0.2s ease;
}

#actValuesDisplay .card:hover {
  border-color: var(--success-500);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


/* =========================
   CLÁUSULA ACT INLINE
   ========================= */
/* Mantido pois é uma seção de exibição fora do modal */

.act-clause-inline-card {
  border-radius: .9rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  border: 0;
}

.act-inline-toggle {
  font-size: .8rem;
  color: #6b7280;
}

.act-clause-inline-content {
  font-size: .9rem;
  line-height: 1.55;
}

.act-clause-box {
  background: #dbeafe;
  border-left: 4px solid #2563eb;
  font-size: .9rem;
}


/* =========================
   MODAL DE CONFIRMAÇÃO ACT (#actConfirmModal)
   ========================= */

/* Modal de confirmação dos novos valores de ajuda de custo */
#actConfirmModal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1300; /* acima do actConfigModal (1200) */
}

#actConfirmModal.show {
  display: flex;
}

#actConfirmModal .modal-content.modal-sm {
  width: 100%;
  max-width: 520px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
  animation: modalFadeIn 0.18s ease-out;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow-y: auto;
}

/* Lista do modal de confirmação */
.act-confirm-list {
  margin: 0 0 0.75rem 0;
  padding: 0;
}

.act-confirm-list li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
  font-size: 0.9rem;
}

.act-confirm-list li:last-child {
  border-bottom: none;
}

.label-block {
  display: flex;
  flex-direction: column;
}

.act-confirm-list .label {
  font-weight: 500;
}

.act-confirm-list .value {
  font-weight: 600;
}

/* Linhas com valores em faixa de atenção (40–50) */
.act-high-row {
  background: #fff9eb;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  margin: 0.1rem 0;
}

.high-hint {
  font-size: 0.72rem;
  color: #b45309; /* laranja-aviso */
  margin-top: 2px;
}

.act-high-value {
  color: #b45309;
}

/* Botões menores no rodapé do modal de confirmação */
#actConfirmModal .modal-footer {
  padding: 0.5rem 1.25rem 0.8rem;
}

#actConfirmModal .modal-footer .btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  min-height: 32px;
}



/* Caixa da senha */
.act-passbox {
  border: 1px solid var(--gray-300);
  border-radius: .6rem;
  background: #fff;
}

/* Input reduzido */
.pass-input {
  padding-right: 38px !important;
}

/* Botão do olho */
.pass-toggle-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #6b7280;
}

.pass-toggle-btn:hover {
  color: var(--primary-700);
}

/* Botão menor */
#actUnlockBtn {
  height: 32px;
}

/* Botão aplicar mais proporcional */
#applyActValuesBtn {
  font-size: .88rem;
  padding: .55rem 0 !important;
  border-radius: .6rem;
}

/* Cards de valores atuais mais harmonizados */
#actValuesDisplay .card {
  border-radius: .7rem;
  padding: 1rem !important;
  background: #f8fafc !important;
}




/* =========================================================
   NOVOS ESTILOS PARA O MODAL ACT
   ========================================================= */

/* Estilo para os cards de valores atuais */
#actValuesDisplay .card {
  border: 1px solid var(--gray-200); /* Borda mais suave */
  border-radius: .75rem; /* Mais arredondado */
  padding: 1rem !important;
  background: var(--light, #f8f9fa) !important;
  transition: all 0.2s ease;
}

#actValuesDisplay .card:hover {
  border-color: var(--primary-300); /* Borda azul ao passar o mouse */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* O VALOR e a DESCRIÇÃO ficam mais coesos */
#actValuesDisplay .card h5 {
  font-size: 1.25rem; /* Reduz o tamanho do valor */
  color: var(--primary-700); /* Cor de destaque (azul) */
}
#actValuesDisplay .card small {
  font-size: 0.75rem; /* Título do cartão menor */
}

/* =========================
   REFINAMENTO DA CAIXA DE SENHA ACT
   ========================= */

/* Caixa da senha (container) */
.act-passbox {
  border: 1px solid var(--gray-300);
  border-radius: .6rem;
  background: #fff;
  padding: 0.35rem 0.6rem !important; /* Reduz o padding para compactar a caixa */
}

/* Input de senha (dentro da caixa) */
#actPasswordInput.pass-input {
  /* Remove margens e bordas extras, prioriza o container .act-passbox */
  border: none !important;
  box-shadow: none !important;
  padding: 0.25rem 0.75rem !important; /* Ajusta o padding interno */
  font-size: 0.875rem !important; /* Tamanho de fonte menor */
  height: 32px; /* Altura padrão para um input 'sm' */
}

/* Botão do olho (visibilidade) */
.pass-toggle-btn {
  /* Posiciona o botão dentro do input */
  position: absolute;
  top: 50%;
  right: 0px; /* Mais próximo à direita */
  transform: translateY(-50%);
  color: var(--gray-500);
  width: 30px; /* Área de clique menor */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-toggle-btn .material-icons {
  font-size: 18px; /* Ícone menor */
}

/* Botão de Desbloqueio (🔒) */
#actUnlockBtn {
  height: 32px; /* Altura menor e proporcional ao input */
  padding: 0 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
#actUnlockBtn .material-icons {
  font-size: 16px; /* Ícone de cadeado menor */
}

/* Input de valores editáveis (Escalas) */
#actEditableRow .form-control-sm {
  font-size: 0.875rem; /* Tamanho da fonte menor */
  padding: 0.4rem 0.6rem;
  height: 34px;
}

/* Botão Aplicar novos valores */
#applyActValuesBtn {
  font-size: 0.875rem !important; /* Proporcional aos outros elementos */
  padding: 0.5rem 0 !important; /* Padding vertical ajustado */
  border-radius: .6rem;
}
#applyActValuesBtn .material-icons {
  font-size: 18px !important;
}

/* Modal de Confirmação ACT: Ajustar o warning para ser mais discreto */
.act-high-row {
  background: #fef3c7; /* Amarelo mais suave */
  border-left: 3px solid #f59e0b; /* Borda lateral para destaque */
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  margin: 0.1rem 0;
}
.high-hint {
  color: #c2410c; /* Laranja escuro */
}
.act-high-value {
  color: #c2410c;
}


























/* =========================================================
   NOVOS ESTILOS PARA O MODAL ACT
   ========================================================= */

/* Estilo para os cards de valores atuais */
#actValuesDisplay .card {
  border: 1px solid var(--gray-200); /* Borda mais suave */
  border-radius: .75rem; /* Mais arredondado */
  padding: 1rem !important;
  background: var(--light, #f8f9fa) !important;
  transition: all 0.2s ease;
}

#actValuesDisplay .card:hover {
  border-color: var(--primary-300); /* Borda azul ao passar o mouse */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* O VALOR e a DESCRIÇÃO ficam mais coesos */
#actValuesDisplay .card h5 {
  font-size: 1.25rem; /* Reduz o tamanho do valor */
  color: var(--primary-700); /* Cor de destaque (azul) */
}
#actValuesDisplay .card small {
  font-size: 0.75rem; /* Título do cartão menor */
}

/* =========================
   REFINAMENTO DA CAIXA DE SENHA ACT (Prioridade na redução)
   ========================= */

/* Caixa da senha (container) - Mais compacta */
.act-passbox {
  border: 1px solid var(--gray-300);
  border-radius: .6rem;
  background: #fff;
  /* Reduz o padding para compactar a altura e a largura */
  padding: 0.2rem 0.6rem !important; 
}

/* Input de senha (dentro da caixa) */
#actPasswordInput.pass-input {
  border: none !important;
  box-shadow: none !important;
  /* Ajusta o padding interno e altura */
  padding: 0.25rem 0.75rem !important;
  font-size: 0.875rem !important;
  height: 32px; /* Altura padrão para um input 'sm' */
}

/* Botão do olho (visibilidade) */
.pass-toggle-btn {
  /* ... (mantido, pois já está otimizado) ... */
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  color: var(--gray-500);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pass-toggle-btn .material-icons {
  font-size: 18px; /* Ícone menor */
}

/* Botão de Desbloqueio (🔒) - Altura e tamanho ajustados */
#actUnlockBtn {
  height: 32px; /* Altura menor e proporcional ao input */
  padding: 0 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
#actUnlockBtn .material-icons {
  font-size: 16px; /* Ícone de cadeado menor */
}

/* Input de valores editáveis (Escalas) */
#actEditableRow .form-control-sm {
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  height: 34px;
}

/* Botão Aplicar novos valores (Reduzido para ser menos 'enorme') */
#applyActValuesBtn {
  font-size: 0.875rem !important; /* Proporcional aos outros elementos */
  padding: 0.45rem 0 !important; /* Reduz um pouco o padding vertical */
  border-radius: .5rem; /* Mais arredondado */
  font-weight: 600; /* Levemente mais ousado */
}
#applyActValuesBtn .material-icons {
  font-size: 18px !important;
}

/* =========================
   MODAL DE CONFIRMAÇÃO ACT (Refinamento)
   ========================= */

/* Estilo geral do modal de confirmação */
#actConfirmModal .modal-content.modal-sm {
  border-radius: 1rem;
  /* Aplica um box-shadow elegante */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); 
}

/* Título mais discreto no modal de confirmação */
#actConfirmModal .modal-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-700);
}

/* --- Refinamento da Lista de Confirmação --- */
.act-confirm-list {
  padding: 0.5rem 1rem; /* Adiciona padding lateral para estética */
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-top: 1rem;
}

.act-confirm-list li {
  /* Remove a linha tracejada e usa um espaçamento mais limpo */
  border-bottom: none !important;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.act-confirm-list .value {
  color: var(--primary-700);
}

/* Caixa de aviso de atenção */
#actConfirmWarning {
  border-radius: .5rem;
  padding: .75rem 1rem;
}

/* Rodapé com botões de tamanho reduzido */
#actConfirmModal .modal-footer {
  padding: 1rem 0; /* Remove padding lateral desnecessário se já estiver no body */
  /* Ajusta o espaçamento dos botões */
  gap: 0.5rem; 
}

#actConfirmModal .modal-footer .btn {
  /* Botões menores no rodapé */
  padding: 0.35rem 1rem; 
  font-size: 0.85rem;
  min-height: 36px;
  border-radius: .5rem;
}

/* Botão de revisão mais discreto */
#actConfirmCancelBtn {
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}










/* --- Refinamento da Lista de Confirmação --- */
.act-confirm-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.95rem;
}

.act-confirm-item:last-child {
  border-bottom: none;
}

/* --- Refinamento da Caixa de Aviso de Alto Valor --- */
.act-confirm-warning {
  border-radius: .5rem;
  padding: .75rem 1rem;
  background: var(--warning-100, #fef3c7); /* Amarelo muito suave */
  color: var(--warning-900, #92400e);
  border: 1px solid var(--warning-300, #fcd34d);
  line-height: 1.4;
  margin-top: 1rem;
}

/* Estilo para os tags de valores altos */
.high-value-tag {
    display: inline-block;
    background-color: var(--warning-200, #fde68a); /* Amarelo mais escuro no tag */
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.high-value-tag .label-alt {
    font-weight: 500;
}
.high-value-tag .value-alt {
    color: var(--danger-700, #b91c1c); /* Destaque em vermelho para o valor alto */
}

/* Remove margem do último elemento do warning-text */
#actConfirmWarningText p:last-child {
    margin-bottom: 0 !important;
}

/* Modal de Confirmação: cabeçalho e corpo */
#actConfirmModal .modal-header {
    border-bottom: none;
    padding-bottom: 0.5rem;
}
#actConfirmModal .modal-body {
    padding-top: 0;
    padding-bottom: 0.5rem;
}



/* Container da lista de chips: Garante que os itens fiquem lado a lado (Flexbox já está no HTML) */
.high-value-list {
  padding: 0; /* Remove padding padrão do ul */
}

/* Estilo para cada item (chip) */
.high-value-chip {
  /* Alinhamento visual */
  display: inline-flex;
  align-items: center;

  /* Estilização do chip */
  background-color: #ffe0b2; /* Cor de fundo suave (laranja claro/atenção) */
  border: 1px solid #ffcc80; /* Borda mais escura */
  border-radius: 4px; /* Cantos arredondados */
  padding: 4px 8px; /* Espaçamento interno */
  
  /* Garante que o texto dentro seja pequeno e visível */
  font-size: 0.75rem; /* Um pouco menor que o small padrão */
  line-height: 1; /* Alinha o texto na vertical */
}

/* Estilo para o valor monetário */
.high-value-chip .value-alt {
  color: #d84315; /* Cor de destaque (vermelho/laranja escuro) */
  margin-left: 4px; /* Espaço entre o label e o valor */
}

/* Estilo para o label (opcional) */
.high-value-chip .label-alt {
  opacity: 0.8;
}


#actPasswordInput::placeholder {
  color: #6c757d !important; /* cinza visível */
  opacity: 1 !important;
}















/* =========================================================
   ANIMAÇÕES ROBUSTAS DO ÍCONE DE PROCESSAMENTO / STATUS
   ========================================================= */

/* 1) Ícone PRONTO – Entrada + Wiggle sutil */
.icon-ready-wiggle {
  animation: iconReadyEntrance 0.7s cubic-bezier(0.22, 1.2, 0.45, 1) both;
}

@keyframes iconReadyEntrance {
  0% {
    transform: scale(0.6) translateY(8px) rotate(-8deg);
    opacity: 0;
  }
  40% {
    transform: scale(1.15) translateY(-4px) rotate(4deg);
    opacity: 1;
  }
  65% {
    transform: scale(0.95) translateY(2px) rotate(-2deg);
  }
  80% {
    transform: scale(1.02) translateY(0) rotate(2deg);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
  }
}

/* 2) Ícone PROCESSANDO – Pulso + giro suave contínuo */
.icon-processing {
  animation: iconProcessingPulsePro 0.9s ease-in-out infinite;
}

@keyframes iconProcessingPulsePro {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
    opacity: 0.9;
    filter: drop-shadow(0 0 0 rgba(37, 99, 235, 0));
  }
  40% {
    transform: scale(1.12) translateY(-1px) rotate(-4deg);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.35));
  }
  70% {
    transform: scale(1.18) translateY(-2px) rotate(4deg);
    opacity: 0.95;
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.45));
  }
  100% {
    transform: scale(1.05) translateY(0) rotate(0deg);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.2));
  }
}

/* 3) Ícone SUCESSO – Glow neon + pop */
.icon-glow-success {
  animation: iconGlowSuccessPro 0.85s ease-out;
}

@keyframes iconGlowSuccessPro {
  0% {
    transform: scale(0.9);
    filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));
  }
  35% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 26px rgba(34, 197, 94, 1));
  }
  70% {
    transform: scale(1.02);
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));
  }
}

/* 4) Ícone ELÁSTICO – Drop elástico único */
.icon-elastic-once {
  animation: iconElasticDropPro 0.7s cubic-bezier(0.16, 1.1, 0.3, 1.0);
}

@keyframes iconElasticDropPro {
  0% {
    transform: translateY(-18px) scale(0.85);
    opacity: 0;
  }
  40% {
    transform: translateY(4px) scale(1.15);
    opacity: 1;
  }
  70% {
    transform: translateY(-2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   EFEITO DE ONDA / PULSO PARA BOTÃO (Relatórios / Protheus)
   ========================================================= */

.btn-wave-enabled {
  position: relative;
  animation: btn-wave-pulse 0.7s cubic-bezier(0.2, 0.8, 0.4, 1) 0.1s infinite;
}

@keyframes btn-wave-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85);
    transform: translateY(0);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
    transform: translateY(-5px);
  }
}

/* =========================================================
   ANIMAÇÃO DE HOVER DA BARRA LATERAL (NAV SIDEBAR)
   ========================================================= */

/* Transição de cor e sombra de texto nos links da sidebar */
.sidebar-nav .nav-link {
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    text-shadow 0.3s ease;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Ícone (Material Icons) dentro do link da sidebar */
.sidebar-nav .nav-link .material-icons {
  transition:
    color var(--transition-fast),
    transform 0.3s ease-out;
}

/* Hover no link da navegação */
.sidebar-nav .nav-link:hover {
  color: var(--primary-700);
  background: var(--primary-100);
  text-shadow: 0px 0px 3px rgba(25, 99, 235, 0.25);
}

/* Efeito no ícone ao passar o mouse */
.sidebar-nav .nav-link:hover .material-icons {
  color: var(--primary-700);
  transform: scale(1.1);
}

/* Badge de notificação no hover */
.sidebar-nav .nav-link:hover .badge {
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}












#employeeTable {
    table-layout: fixed;
}

#employeeTable .totals-row td {
    text-align: center;
    font-weight: 600;
    background-color: #f8f9fa;
}

#employeeTable .totals-row td[colspan] {
    text-align: left;
}






















/* GRID */
.summary-grid,
.employee-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* CARD BASE */
.summary-card {
  background: white;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Ícones */
.summary-card .card-icon {
  background: #eceffd;
  padding: 8px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary-card .card-icon .material-icons {
  font-size: 24px;
}

/* Conteúdo */
.summary-card .card-value {
  font-size: 1.4rem;
  font-weight: 700;
}
.summary-card .card-label {
  font-size: 0.85rem;
  opacity: .7;
}

/* CARD FLIP */
.flip-card {
  perspective: 1000px;
}
.flip-card-inner {
  width: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-face {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
  padding: 10px;
}
.flip-card-back {
  transform: rotateY(180deg);
  text-align: left;
}
.flip-list {
  margin-top: 8px;
  font-size: .85rem;
  line-height: 1.3rem;
}
.flip-line + .flip-line {
  margin-top: 4px;
}
.card-hint {
  font-size: 0.7rem;
  margin-top: 4px;
  opacity: 0.6;
}