/* main.css - Arquivo principal que importa todos os outros arquivos CSS */

/* Primeiro as variáveis para que estejam disponíveis para todos os outros arquivos */
@import 'variables.css';

/* Reset e estilos básicos */
@import 'reset.css';

/* Layout e estrutura principal */
@import 'layout.css';
@import 'sidebar.css';
@import 'navigation.css';

/* Componentes e elementos de interface */
@import 'components.css';
@import 'forms.css';
@import 'tables.css';
@import 'text.css';
@import 'modal.css';

/* Estilos específicos para o dashboard */
@import 'dashboard.css';
@import 'orders.css';

/* Melhorias para DataTables */
@import 'datatables-fixes.css';

/* Classes utilitárias (devem ser as últimas para ter maior prioridade) */
@import 'utils.css';

/* Animações e efeitos */
.animate-fade-in {
  opacity: 0;
  animation: fade-in 0.5s forwards;
}

@keyframes fade-in {
  100% { opacity: 1; }
}

.animate-slide-in {
  transform: translateX(100%);
  animation: slide-in 0.3s forwards;
}

@keyframes slide-in {
  100% { transform: translateX(0); }
}

/* Notificações */
.notificacoes-area {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-index-popover);
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.new-order-notification {
  background-color: var(--accent-color);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  transform: translateX(120%);
  animation: slide-in 0.3s forwards;
}