html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #16181b;
  }
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media print {
  * {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ==========================================================================
   Heewa Brand — Fontes self-hosted
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* Fonte padrão do app para Inter */
html, body, #root, .MuiTypography-root, .MuiButton-root, .MuiInputBase-root, .MuiFormControl-root {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* ==========================================================================
   Heewa Brand — Login page theming
   Scoped ao layout de login: #root > main (LoginLayout root)
   ========================================================================== */

/* Sidebar (painel esquerdo) — usa cor accent no light, neutro no dark */
@media (prefers-color-scheme: light) {
  #root > main > div:first-child {
    background: #4f7668 !important;
  }
}
@media (prefers-color-scheme: dark) {
  #root > main > div:first-child {
    background: #16181b !important;
  }
}

/* Card do formulário (painel direito) */
#root > main > div.MuiPaper-root,
#root > main > div[class*='Paper'] {
  background: #fff !important;
}
@media (prefers-color-scheme: dark) {
  #root > main > div.MuiPaper-root,
  #root > main > div[class*='Paper'] {
    background: #202226 !important;
  }
}

/* Botão "Entrar" — accent verde-sálvia */
#root > main button.MuiButton-contained.MuiButton-colorSecondary,
#root > main button.MuiButton-contained[color="secondary"] {
  background: #4f7668 !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  transition: background 0.2s cubic-bezier(.22,1,.36,1), box-shadow 0.2s !important;
}
#root > main button.MuiButton-contained[color="secondary"]:hover {
  background: #3d6356 !important;
  box-shadow: 0 4px 12px rgba(79,118,104,0.3) !important;
}
#root > main button.MuiButton-contained[color="secondary"]:active {
  background: #2e4f44 !important;
}
#root > main button.MuiButton-contained[color="secondary"].Mui-disabled {
  background: #a7c4bb !important;
  color: #f4f3ef !important;
}

/* Inputs — label flutuante, foco em accent */
#root > main .MuiInputBase-root,
#root > main .MuiOutlinedInput-root {
  border-radius: 8px !important;
  transition: box-shadow 0.2s cubic-bezier(.22,1,.36,1) !important;
}
#root > main .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #4f7668 !important;
}
#root > main .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #4f7668 !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(79,118,104,0.15) !important;
}
#root > main .MuiInputLabel-root {
  color: #555960 !important;
}
#root > main .MuiInputLabel-root.Mui-focused {
  color: #4f7668 !important;
}
@media (prefers-color-scheme: dark) {
  #root > main .MuiInputLabel-root {
    color: #a7a9ae !important;
  }
  #root > main .MuiInputLabel-root.Mui-focused {
    color: #7fa596 !important;
  }
  #root > main .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #7fa596 !important;
    box-shadow: 0 0 0 3px rgba(127,165,150,0.2) !important;
  }
}

/* Checkbox / switch / radio — accent color */
#root > main .MuiCheckbox-root.Mui-checked,
#root > main .MuiSwitch-root.Mui-checked .MuiSwitch-thumb,
#root > main .MuiRadio-root.Mui-checked {
  color: #4f7668 !important;
}
@media (prefers-color-scheme: dark) {
  #root > main .MuiCheckbox-root.Mui-checked,
  #root > main .MuiSwitch-root.Mui-checked .MuiSwitch-thumb,
  #root > main .MuiRadio-root.Mui-checked {
    color: #7fa596 !important;
  }
}

/* Links */
#root > main a {
  color: #4f7668 !important;
}
#root > main a:hover {
  color: #3d6356 !important;
}
@media (prefers-color-scheme: dark) {
  #root > main a {
    color: #7fa596 !important;
  }
  #root > main a:hover {
    color: #9ccbbb !important;
  }
}

/* Snackbar / error messages */
#root > main .MuiAlert-root.MuiAlert-standardError {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-left: 4px solid #ef4444 !important;
}
@media (prefers-color-scheme: dark) {
  #root > main .MuiAlert-root.MuiAlert-standardError {
    background: #7f1d1d !important;
    color: #fecaca !important;
    border-left: 4px solid #ef4444 !important;
  }
}

/* Select (idioma) */
#root > main .MuiSelect-root,
#root > main .MuiMenuItem-root {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}

/* QR code button — mantém visual, só cor do ícone */
#root > main button[aria-label*="QR" i],
#root > main button[title*="QR" i] {
  color: #4f7668 !important;
}
@media (prefers-color-scheme: dark) {
  #root > main button[aria-label*="QR" i],
  #root > main button[title*="QR" i] {
    color: #7fa596 !important;
  }
}

/* Animação de entrada do card */
@media (prefers-reduced-motion: no-preference) {
  #root > main > div.MuiPaper-root,
  #root > main > div[class*='Paper'] {
    animation: heewa-fade-in 0.5s cubic-bezier(.22,1,.36,1) both;
  }
}
@keyframes heewa-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Logo no sidebar (via atributo server logo) — garantir tamanho adequado */
#root > main > div:first-child img {
  max-width: 200px !important;
  max-height: 100px !important;
  height: auto !important;
  width: auto !important;
}

/* ==========================================================================
   Heewa Brand — Dark mode tweaks globais leves (para consistência)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .MuiDrawer-paper,
  .MuiAppBar-root,
  .MuiCard-root {
    background: #202226 !important;
    border-color: #34373c !important;
  }
  .MuiTypography-root {
    color: #f4f3ef !important;
  }
  .MuiDivider-root {
    border-color: #34373c !important;
  }
}