/* =====================================
   RESET
===================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================
   HTML / BODY
===================================== */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Poppins", sans-serif;

  background: var(--bg-primary);

  color: var(--text-primary);

  overflow-x: hidden;

  transition:
    background var(--transition),
    color var(--transition);
}

/* =====================================
   MAIN
===================================== */

.main {
  margin-left: var(--sidebar-collapsed);

  min-height: 100vh;

  transition: margin-left var(--transition);
}

/* =====================================
   MAIN COM SIDEBAR EXPANDIDA
===================================== */

.main.sidebar-expanded {
  margin-left: var(--sidebar-width);
}

/* =====================================
   CONTEÚDO
===================================== */

.content {
  padding: 32px;

  /* Entrada suave do conteúdo ao abrir/trocar de página (sem "estalar").
     Sutil: some só o fade-olhos e uma leve subida. */
  animation: entrada-pagina 0.28s ease both;
}

@keyframes entrada-pagina {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respeita quem prefere menos movimento (sistema/accessibilidade). */
@media (prefers-reduced-motion: reduce) {
  .content {
    animation: none;
  }
}

/* =====================================
   WELCOME
===================================== */

.welcome-label {
  color: var(--primary);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;
}

.welcome h1 {
  margin-top: 8px;

  font-size: 32px;

  font-weight: 700;
}

.welcome p {
  margin-top: 8px;

  color: var(--text-secondary);
}

/* =====================================
   CARDS
===================================== */

.dashboard-cards {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-top: 32px;
}

.card {
  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 24px;

  transition:
    background var(--transition),
    border var(--transition),
    transform var(--transition);
}

.card:hover {
  transform: translateY(-2px);
}

.card-label {
  display: block;

  color: var(--text-secondary);

  font-size: 13px;
}

.card strong {
  display: block;

  margin-top: 10px;

  font-size: 30px;

  font-weight: 700;
}

.card-description {
  display: block;

  margin-top: 8px;

  color: var(--text-secondary);

  font-size: 12px;
}

/* =====================================
   EMPTY STATE
===================================== */

.empty-state {
  margin-top: 24px;

  min-height: 300px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: 12px;
}

.empty-icon {
  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 12px;

  background: var(--primary);

  color: #ffffff;

  font-size: 22px;
}

.empty-state h2 {
  margin-top: 18px;
}

.empty-state p {
  margin-top: 8px;

  color: var(--text-secondary);
}

.primary-button {
  margin-top: 20px;

  padding: 11px 20px;

  border: none;

  border-radius: 8px;

  background: var(--primary);

  color: white;

  font-family: inherit;

  font-weight: 600;

  cursor: pointer;
}

.primary-button:hover {
  opacity: 0.9;
}

/* =====================================
   GRÁFICOS
===================================== */

.charts-section {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-top: 24px;
}

.chart-placeholder {
  min-height: 350px;

  padding: 24px;

  background: var(--bg-card);

  border: 1px solid var(--border);

  border-radius: 12px;
}

.chart-header {
  display: flex;

  align-items: center;

  justify-content: space-between;
}

.chart-label {
  color: var(--primary);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.chart-header h3 {
  margin-top: 5px;

  font-size: 16px;
}

.chart-area {
  height: 260px;

  margin-top: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px dashed var(--border);

  border-radius: 8px;

  color: var(--text-secondary);

  font-size: 12px;
}

/* =====================================
   RESPONSIVIDADE
===================================== */

@media (max-width: 1000px) {
  .dashboard-cards {
    grid-template-columns: 1fr;
  }

  .charts-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .main {
    margin-left: var(--sidebar-collapsed);
  }

  .content {
    padding: 20px;
  }
}

/* =====================================
   LOGO (imagem) — sempre contida no quadrado da marca
   (vale em toda a plataforma: sidebar, login e preview)
===================================== */
.logo-icon,
.login-logo .marca,
.visual-logo {
  overflow: hidden;
}

.logo-icon img,
.login-logo .marca img,
.visual-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;
}