/* Global Grid Background Pattern - Versão Corrigida */
/* Aplicado em todas as páginas sem alterar cores e sem interferir com modais */

html {
  position: relative;
}

body {
  position: relative;
  /* Background base do body - será coberto pelo grid */
  background-color: #f4f5fa !important;
}

/* Grid background - colocado no body para aparecer em todas as páginas */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Grid mais visível */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  background-color: transparent;
  animation: gridMove 20s linear infinite;
  pointer-events: none;
  /* Z-index muito baixo para ficar abaixo de tudo, incluindo modais */
  z-index: -1;
  /* Garantir que não interfira com eventos */
  will-change: transform;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Ajustar z-index do conteúdo para garantir que fique acima do grid */
.layout-wrapper {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

.layout-page {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

/* Tornar o content-wrapper transparente para o grid aparecer */
.content-wrapper {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

/* Containers com background transparente para grid aparecer */
.container,
.container-fluid {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
}

/* Cards mantêm background sólido (não precisam mostrar grid) */
.card {
  background-color: #fff !important;
  position: relative;
  z-index: 3;
}

.bg-white {
  background-color: #fff !important;
}

/* Dark theme - grid mais sutil e ajustes de background */
[data-bs-theme="dark"] body {
  background-color: #1e1e1e !important;
}

[data-bs-theme="dark"] body::before {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

[data-bs-theme="dark"] .layout-wrapper,
[data-bs-theme="dark"] .layout-page,
[data-bs-theme="dark"] .content-wrapper,
[data-bs-theme="dark"] .container,
[data-bs-theme="dark"] .container-fluid {
  background-color: transparent !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .bg-white {
  background-color: #2c303a !important;
}

/* Garantir que modais e backdrops fiquem acima do grid e de todo conteúdo */
.modal {
  z-index: 1090 !important;
  position: fixed !important;
}

.modal-backdrop {
  z-index: 1089 !important;
  position: fixed !important;
}

/* Garantir que elementos do modal também fiquem acima */
.modal-dialog {
  z-index: 1091 !important;
  position: relative !important;
}

.modal-content {
  z-index: 1092 !important;
  position: relative !important;
}