@charset "UTF-8";
/* --- Estilos Globais e Reset --- */

/* Importa a fonte Roboto do Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
/* Importa as variáveis CSS definidas em variables.css */
@import "variables.css";

/* Reset básico para remover margens e paddings padrão */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho do elemento */
  font-family: var(--font-family); /* Aplica a fonte padrão definida nas variáveis */
  /*max-width: 99.2%;*/
}

/* Estilos base para o corpo da página */
body {
  background-color: var(--neutral-bg); /* Cor de fundo geral (cinza claro) */
  color: var(--neutral-text); /* Cor padrão do texto (cinza escuro) */
  font-size: var(--font-size-md); /* Tamanho de fonte base (16px) */
  line-height: 1.5; /* Altura de linha para melhor legibilidade */
  min-height: 100vh; /* Garante que o corpo ocupe pelo menos a altura total da viewport */
  /*max-width: 100%;*/
}

/* --- Layout Principal --- */

/* Container principal que organiza o menu lateral e o conteúdo */
.container {
  display: flex; /* Usa flexbox para layout */
  min-height: 100vh;
}

.main-content-inner{
    max-width: 100%;
    overflow: scroll;
}

/* Área de conteúdo principal */
.main-content {
  flex: 1; /* Ocupa o espaço restante */
  margin-left: var(--menu-width-collapsed); /* Deixa espaço para o menu recolhido */
  transition: margin-left var(--transition-normal); /* Anima a mudança de margem */
  padding: var(--spacing-md); /* Espaçamento interno */
  overflow: scroll;
}

/* Ajusta a margem quando o menu está expandido */
.main-content.menu-expanded {
  margin-left: var(--menu-width-expanded);
}

/* --- Componentes Globais --- */

/* Estilo base para Cards (usados para agrupar conteúdo) */
.card {
  background-color: var(--neutral-card); /* Fundo branco */
  border-radius: var(--border-radius-md); /* Bordas arredondadas */
  box-shadow: var(--shadow-sm); /* Sombra sutil */
  margin-bottom: var(--spacing-lg); /* Espaçamento inferior */
  overflow: hidden; /* Garante que conteúdo interno não ultrapasse as bordas arredondadas */
}

/* Cabeçalho do Card */
.card-header {
  padding: var(--spacing-md) var(--spacing-lg); /* Espaçamento interno */
  border-bottom: 1px solid var(--neutral-border); /* Linha divisória */
  display: flex;
  align-items: center;
  background-color: rgba(25, 118, 210, 0.05); /* Fundo levemente azulado */
}

.card-header .icon {
  margin-right: var(--spacing-md);
  color: var(--primary-color);
  font-size: var(--font-size-lg);
}

.card-header h2 {
  font-size: var(--font-size-lg);
  font-weight: 500; /* Peso médio para títulos */
  color: var(--primary-dark);
  margin: 0;
}

/* Corpo do Card */
.card-body {
  padding: var(--spacing-lg); /* Espaçamento interno */
}

/* --- Tipografia --- */
/* Estilos padrão para títulos e parágrafos */
h1 {
  font-size: var(--font-size-xl); /* 24px */
  font-weight: 700; /* Negrito */
  margin-bottom: var(--spacing-lg);
  color: var(--primary-dark);
}

h2 {
  font-size: var(--font-size-lg); /* 18px */
  font-weight: 500; /* Médio */
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: var(--font-size-md); /* 16px */
  font-weight: 500; /* Médio */
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-md);
}

/* --- Links --- */
a {
  color: var(--primary-color); /* Cor azul padrão */
  text-decoration: none; /* Remove sublinhado padrão */
  transition: color var(--transition-fast); /* Animação suave na mudança de cor */
}

a:hover {
  color: var(--primary-dark); /* Escurece a cor no hover */
  text-decoration: underline; /* Adiciona sublinhado no hover */
}

/* --- Classes Utilitárias --- */
/* Classes auxiliares para alinhamento, cores e visibilidade */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-info { color: var(--info-color); }

.hidden { display: none; } /* Oculta completamente o elemento */

/* Oculta visualmente, mas mantém acessível para leitores de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Responsividade Global --- */
/* Ajustes para telas menores (tablets e celulares) */
@media (max-width: 768px) {
  .main-content {
    margin-left: 0; /* Remove a margem do menu em telas pequenas */
    padding: var(--spacing-sm); /* Reduz o padding */
  }

  .card-header, .card-body {
    padding: var(--spacing-md); /* Reduz o padding dos cards */
  }

  h1 {
    font-size: var(--font-size-lg); /* Reduz o tamanho do título principal */
  }
}

/* --- Animações --- */
/* Animação de Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn var(--transition-normal);
}

/* --- Notificações Toast --- */
/* Container para notificações flutuantes (toasts) */
.toast-container {
  position: fixed; /* Posição fixa na tela */
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 9999; /* Garante que fique acima de outros elementos */
}

/* Estilo individual do Toast */
.toast {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  min-width: 300px;
  max-width: 400px;
  animation: fadeIn var(--transition-normal); /* Animação de entrada */
}

/* Estilos específicos para cada tipo de Toast */
.toast-success { background-color: var(--success-color); color: white; }
.toast-error { background-color: var(--error-color); color: white; }
.toast-warning { background-color: var(--warning-color); color: white; }
.toast-info { background-color: var(--info-color); color: white; }

.toast .icon { margin-right: var(--spacing-md); }

/* Botão de fechar o Toast */
.toast .close {
  margin-left: auto; /* Empurra para a direita */
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.toast .close:hover { opacity: 1; }

/* --- Breadcrumbs --- */
/* Estilo para a trilha de navegação */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap; /* Permite quebrar linha se necessário */
  margin-bottom: var(--spacing-lg);
  font-size: var(--font-size-sm); /* Tamanho de fonte menor */
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
}

/* Separador entre itens */
.breadcrumbs-item:not(:last-child)::after {
  content: "/";
  margin: 0 var(--spacing-sm);
  color: var(--neutral-text-light);
}

.breadcrumbs-item a { color: var(--primary-color); }

/* Estilo do último item (página atual) */
.breadcrumbs-item:last-child {
  color: var(--neutral-text);
  font-weight: 500;
}

/* --- Loader --- */
/* Indicador de carregamento (spinner) */
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(25, 118, 210, 0.3); /* Borda cinza clara */
  border-radius: 50%;
  border-top-color: var(--primary-color); /* Cor primária na parte superior */
  animation: spin 1s ease-in-out infinite; /* Animação de rotação */
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Container para centralizar o loader */
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-lg);
}

/* --- Overlay --- */
/* Fundo escurecido para modais */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Preto semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Abaixo dos modais, mas acima do resto */
}
/* Adições sugeridas ao style_global.css */

/* Classe utilitária para largura automática */
.w-auto {
  width: auto !important; /* !important para garantir a sobreposição se necessário, mas usar com cautela */
}

/* Classe utilitária para gap usando variável de espaçamento --spacing-sm */
.gap-spacing-sm {
  gap: var(--spacing-sm);
}


/* =====================================================
   TOP MESSAGE - CSS para mensagens importantes em ERP
   ===================================================== */

/* Container principal da Top Message */
.top-message {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000; /* Maior que toast (9999) para ficar acima */

  /* Layout e dimensões */
  padding: var(--spacing-lg) var(--spacing-xl);
  min-height: 60px;
  width: 100%;

  /* Tipografia */
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;

  /* Visual */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid transparent;

  /* Animações */
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;

  /* Flexbox para centralização */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

/* Estado visível da Top Message */
.top-message[style*="display: block"],
.top-message.show {
  transform: translateY(0);
  opacity: 1;
}

/* ===== VARIAÇÕES POR TIPO ===== */

/* Top Message - Informação (padrão) */
.top-info {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #0d47a1;
  border-bottom-color: #1976d2;
}

.top-info::before {
  content: "ℹ️";
  font-size: var(--font-size-lg);
  margin-right: var(--spacing-sm);
}

/* Top Message - Sucesso */
.top-success {
  background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
  color: #1b5e20;
  border-bottom-color: #4caf50;
}

.top-success::before {
  content: "✅";
  font-size: var(--font-size-lg);
  margin-right: var(--spacing-sm);
}

/* Top Message - Aviso */
.top-warning {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  color: #e65100;
  border-bottom-color: #ff9800;
}

.top-warning::before {
  content: "⚠️";
  font-size: var(--font-size-lg);
  margin-right: var(--spacing-sm);
}

/* Top Message - Erro */
.top-error {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #b71c1c;
  border-bottom-color: #f44336;
}

.top-error::before {
  content: "❌";
  font-size: var(--font-size-lg);
  margin-right: var(--spacing-sm);
}

/* ===== RESPONSIVIDADE ===== */

/* Tablets */
@media (max-width: 768px) {
  .top-message {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    min-height: 50px;
  }

  .top-message::before {
    font-size: var(--font-size-md);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .top-message {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    min-height: 45px;
    text-align: left;
  }

  .top-message::before {
    font-size: var(--font-size-sm);
    margin-right: var(--spacing-xs);
  }
}

/* ===== AJUSTES PARA LAYOUT COM MENU LATERAL ===== */

/* Quando o menu lateral está expandido */
.menu-expanded .top-message {
  left: var(--menu-width-expanded, 250px);
  width: calc(100% - var(--menu-width-expanded, 250px));
}

/* Quando o menu lateral está recolhido */
.menu-collapsed .top-message {
  left: var(--menu-width-collapsed, 60px);
  width: calc(100% - var(--menu-width-collapsed, 60px));
}


/* =====================================================
   TOP MESSAGE - CSS para mensagens importantes em ERP
   ===================================================== */

/* Container principal da Top Message */
.top-message {
  position: fixed;
  top: var(--header-height); /* Abaixo do menu superior */
  left: calc(var(--menu-width-collapsed) + var(--spacing-lg)); /* Começa após o menu lateral */
  right: var(--spacing-lg); /* Margem direita */
  max-width: 500px; /* Largura máxima reduzida para ser menos intrusiva */
  z-index: 10000; /* Maior que toast (9999) para ficar acima */

  /* Layout e dimensões */
  padding: var(--spacing-md) var(--spacing-lg); /* Padding reduzido */
  min-height: 48px; /* Altura mínima reduzida */

  /* Tipografia */
  font-size: var(--font-size-sm); /* Fonte menor para ser menos chamativa */
  font-weight: 500;
  line-height: 1.4;
  text-align: left; /* Alinhamento à esquerda para melhor leitura */

  /* Visual */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Sombra mais sutil */
  border-left: 4px solid transparent; /* Borda lateral ao invés de inferior */
  border-radius: var(--border-radius-md); /* Bordas arredondadas */
  backdrop-filter: blur(8px); /* Efeito de blur sutil */

  /* Animações */
  transform: translateY(-100%); /* Esconde acima */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transição mais rápida */
  opacity: 0;

  /* Flexbox para layout */
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Estado visível da Top Message */
.top-message.show {
  transform: translateY(0); /* Desce para a posição visível */
  opacity: 1;
}

/* ===== VARIAÇÕES POR TIPO ===== */

/* Top Message - Informação (padrão) */
.top-info {
  background: rgba(227, 242, 253, 0.95); /* Fundo mais transparente */
  color: #0d47a1;
  border-left-color: #1976d2;
}

.top-info::before {
  content: "ℹ️";
  font-size: var(--font-size-md);
  flex-shrink: 0; /* Não encolhe o ícone */
}

/* Top Message - Sucesso */
.top-success {
  background: rgba(232, 245, 232, 0.95);
  color: #1b5e20;
  border-left-color: #4caf50;
}

.top-success::before {
  content: "✅";
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

/* Top Message - Aviso */
.top-warning {
  background: rgba(255, 248, 225, 0.95);
  color: #e65100;
  border-left-color: #ff9800;
}

.top-warning::before {
  content: "⚠️";
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

/* Top Message - Erro */
.top-error {
  background: rgba(255, 235, 238, 0.95);
  color: #b71c1c;
  border-left-color: #f44336;
}

.top-error::before {
  content: "❌";
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

/* ===== RESPONSIVIDADE ===== */

/* Tablets */
@media (max-width: 768px) {
  .top-message {
    left: calc(var(--menu-width-collapsed) + var(--spacing-md));
    right: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    min-height: 44px;
    max-width: 350px;
  }

  .top-message::before {
    font-size: var(--font-size-sm);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .top-message {
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    padding: var(--spacing-sm);
    font-size: var(--font-size-xs);
    min-height: 40px;
    max-width: none; /* Remove limitação de largura no mobile */
  }

  .top-message::before {
    font-size: var(--font-size-sm);
  }
}

/* ===== AJUSTES PARA LAYOUT COM MENU LATERAL ===== */

/* Quando o menu lateral está expandido */
body.menu-expanded .top-message {
  left: calc(var(--menu-width-expanded) + var(--spacing-lg));
}

/* Quando o menu lateral está recolhido */
body.menu-collapsed .top-message {
  left: calc(var(--menu-width-collapsed) + var(--spacing-lg));
}

/* ===== INTERAÇÕES E MICRO-ANIMAÇÕES ===== */

/* Efeito de pulse mais sutil para chamar atenção */
.top-message.pulse {
  animation: topMessagePulse 3s infinite;
}

@keyframes topMessagePulse {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(0) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Animação de saída */
.top-message.hiding {
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.25s ease-in;
}

/* ===== BOTÃO DE FECHAR (OPCIONAL) ===== */

.top-message .close-btn {
  margin-left: auto; /* Empurra para a direita */
  background: none;
  border: none;
  font-size: var(--font-size-md);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  color: inherit;
  padding: var(--spacing-xs);
  border-radius: 50%;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-message .close-btn:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* ===== ACESSIBILIDADE ===== */

/* Garante contraste adequado */
.top-message {
  color-contrast: AA;
}

/* Suporte para modo de alto contraste */
@media (prefers-contrast: high) {
  .top-message {
    border-left-width: 6px;
    font-weight: 600;
    background: white !important;
  }
}

/* Suporte para redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .top-message {
    transition: opacity 0.2s ease;
    transform: none;
  }

  .top-message.pulse {
    animation: none;
  }
}

/* ===== VARIAÇÃO PARA MENSAGENS LONGAS ===== */

.top-message.multiline {
  min-height: auto;
  max-height: 100px;
  overflow-y: auto;
  align-items: flex-start;
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.top-message.multiline::before {
  margin-top: 2px;
}

/* ===== INTEGRAÇÃO COM SISTEMA DE NOTIFICAÇÕES ===== */

/* Ajusta posição do toast quando há top-message */
body.has-top-message .toast-container {
  top: calc(var(--header-height) + 60px + var(--spacing-md));
}

@media (max-width: 768px) {
  body.has-top-message .toast-container {
    top: calc(var(--header-height) + 50px + var(--spacing-md));
  }
}

@media (max-width: 480px) {
  body.has-top-message .toast-container {
    top: calc(var(--header-height) + 45px + var(--spacing-md));
  }
}

/* ===== ESTADO DISCRETO PARA ATUALIZAÇÕES ===== */

/* Quando a mensagem é apenas atualizada (sem animação de entrada) */
.top-message.update-only {
  transform: translateY(0);
  opacity: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ===== MELHORIAS DE UX ===== */

/* Hover state para melhor feedback */
.top-message:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Texto da mensagem */
.top-message .message-text {
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}