/* Estilos customizados para WhysKey Connect - Cores Harmonizadas */

/* Variáveis de cores da nova paleta harmonizada */
:root {
  /* Browns */
  --brown-primary: #a89079;
  --brown-light: #ddd0bb;
  --brown-lighter: #ebe2d5;
  --brown-lightest: #fbf9f7;
  --brown-dark: #8b6f57;
  --brown-darker: #5c4837;
  
  /* Ambers */
  --amber-primary: #f9d16b;
  --amber-light: #fbdf9a;
  --amber-lighter: #fdecc9;
  --amber-lightest: #fefbf3;
  --amber-dark: #e8c149;
  --amber-darker: #d4ad2c;
  
  /* Neutrals */
  --neutral-primary: #ffffff;
  --neutral-light: #fcfaf8;
  --neutral-lighter: #f9f6f2;
  --neutral-lightest: #f5f1eb;
  --neutral-dark: #e8e2d9;
  --neutral-darker: #d9d1c7;
}

/* Background geral da aplicação - tom neutro quente */
body {
  background: var(--neutral-lighter);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--brown-dark);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Garantir que o AppShell funcione corretamente */
#root, .mantine-AppShell-root {
  min-height: 100vh;
  overflow-x: hidden;
}

/* Corrigir problemas de scroll e posicionamento */
.mantine-AppShellMain-main {
  min-height: calc(100vh - 80px) !important;
  width: 100% !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Prevenir deslocamento de conteúdo */
.mantine-Container-root {
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Reset de margens e paddings para containers principais */
.mantine-Container-root {
  max-width: 100% !important;
}

/* Efeitos de hover para cards */
.mantine-Card-root {
  transition: all 300ms ease;
  border-radius: 12px !important;
  background: var(--neutral-primary);
  border: 1px solid var(--neutral-dark);
}

.mantine-Card-root:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(92, 72, 55, 0.12);
}

/* Botões com cores harmonizadas */
.mantine-Button-root[data-variant="filled"] {
  border-radius: 8px !important;
  transition: all 200ms ease;
  font-weight: 500;
  background: var(--amber-primary);
  color: var(--brown-darker);
}

.mantine-Button-root[data-variant="filled"]:hover {
  background: var(--amber-dark);
}

/* Efeitos de foco para inputs */
.mantine-TextInput-input:focus,
.mantine-Select-input:focus,
.mantine-MultiSelect-input:focus,
.mantine-DatePickerInput-input:focus {
  border-color: var(--amber-primary) !important;
  box-shadow: 0 0 0 2px rgba(249, 209, 107, 0.2) !important;
}

/* Headers com cor sólida do marrom profundo */
.mantine-AppShell-header {
  background: var(--brown-darker) !important;
  border-bottom: 1px solid var(--brown-dark) !important;
  box-shadow: 0 2px 8px rgba(92, 72, 55, 0.12) !important;
}

/* Títulos com cor marrom profunda */
.mantine-Title-root {
  color: var(--brown-darker);
  text-shadow: 0 1px 3px rgba(92, 72, 55, 0.1);
}

/* Ícones com efeito de respiração sutil */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.mantine-ThemeIcon-root {
  animation: breathe 4s ease-in-out infinite;
  background: var(--amber-primary) !important;
  color: var(--brown-darker) !important;
}

/* Modais com bordas arredondadas e cores harmonizadas */
.mantine-Modal-content {
  border-radius: 16px !important;
  background: var(--neutral-primary);
  border: 1px solid var(--neutral-dark);
}

.mantine-Modal-header {
  border-radius: 16px 16px 0 0 !important;
  padding: 1.5rem !important;
  background: var(--neutral-lighter);
  border-bottom: 1px solid var(--neutral-dark);
}

/* Papers com efeito sutil */
.mantine-Paper-root {
  backdrop-filter: blur(10px);
  background: var(--neutral-primary);
  border: 1px solid var(--neutral-dark);
}

/* Dividers com estilo harmonizado */
.mantine-Divider-root {
  border-color: var(--neutral-dark) !important;
}

.mantine-Divider-label {
  color: var(--brown-dark);
  background: var(--neutral-primary);
}

/* Links com cor âmbar */
a {
  color: var(--amber-dark);
  text-decoration: none;
  transition: color 200ms ease;
}

a:hover {
  color: var(--amber-darker);
}

/* Inputs com cores harmonizadas */
.mantine-TextInput-input,
.mantine-Select-input,
.mantine-MultiSelect-input,
.mantine-DatePickerInput-input {
  border-color: var(--neutral-dark);
  background: var(--neutral-primary);
}

/* Botões secundários */
.mantine-Button-root[data-variant="outline"] {
  border-color: var(--brown-primary);
  color: var(--brown-primary);
}

.mantine-Button-root[data-variant="outline"]:hover {
  background: var(--brown-lightest);
  border-color: var(--brown-dark);
  color: var(--brown-dark);
}

/* Tabs harmonizados */
.mantine-Tabs-tab {
  color: var(--brown-dark);
}

.mantine-Tabs-tab[data-active] {
  color: var(--amber-dark);
  border-color: var(--amber-dark);
}

/* Notificações e alertas */
.mantine-Notification-root {
  background: var(--neutral-lighter);
  border: 1px solid var(--neutral-dark);
}

/* Menu dropdown */
.mantine-Menu-dropdown {
  background: var(--neutral-primary);
  border: 1px solid var(--neutral-dark);
  box-shadow: 0 4px 12px rgba(92, 72, 55, 0.15);
}

.mantine-Menu-item:hover {
  background: var(--neutral-lighter);
}