/* --- VARIÁVEIS GLOBAIS DE TEMA --- */
:root {
    --bg-color: #f0f2f5;
    --card-bg-color: #ffffff;
    --text-color: #333;
    --title-color: #111;
    --border-color: #e0e0e0;
    --primary-color: #0d6efd;
    --primary-hover-color: #0b5ed7;
    --link-color: #0d6efd;
    --switch-bg: #ccc;
}

body.dark-mode {
    --bg-color: #121212;
    --card-bg-color: #1e1e1e;
    --text-color: #e0e0e0;
    --title-color: #ffffff;
    --border-color: #333;
    --primary-color: #1a73e8;
    --primary-hover-color: #2880f0;
    --link-color: #8ab4f8;
    --switch-bg: #555;
}

/* --- ESTILOS GERAIS --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* Container Principal */
.config-container {
  max-width: 1400px;
  margin: 40px auto;
  padding: 30px;
  background-color: var(--card-bg-color);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: margin-left .28s ease;
}

/* Quando a sidebar estiver expandida */
body.sidebar-hover .config-container,
body.sidebar-pinned .config-container {
  margin-left: calc(var(--sb-expanded) + 20px);
}

/* Em telas pequenas (mobile) */
@media (max-width: 768px) {
  .config-container {
    margin:  auto; /* centralizado normal */
  }
}