/* ===== ECO-FLAT: Menu vertical com ícones de largura fixa =====
   Coloque este arquivo após o main.css para sobrescrever estilos genéricos.
   Ajustes rápidos via variáveis abaixo.
*/
:root {
  --menu-gap: 6px;                /* espaço entre itens */
  --menu-pad-y: 8px;              /* padding vertical do item */
  --menu-pad-x: 10px;             /* padding horizontal do item */
  --menu-icon-box: 1.6em;         /* largura fixa do box do ícone */
  --menu-icon-size: 1em;          /* tamanho do ícone */
  --menu-radius: 6px;             /* bordas dos itens */
  --menu-hover-bg: rgba(0,0,0,0.04);
  --menu-hover-border: #eaeaea;
}

/* Zera sublinhado pontilhado dos links herdado do tema */
#main-menu a { border-bottom: none; }

/* Container do menu */
#main-menu.menu-vertical {
  margin: 0 0 1rem 0;
}

/* Lista de itens */
#main-menu .menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  padding: 0;
  margin: 0;
}

/* Item */
#main-menu .menu-list li {
  margin: 0;
}

/* Link do item */
#main-menu .menu-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--menu-pad-y) var(--menu-pad-x);
  border-radius: var(--menu-radius);
  text-decoration: none;
  border: 1px solid transparent;
  line-height: 1.15;
  color: inherit;
}

/* Hover/Focus */
#main-menu .menu-list a:hover,
#main-menu .menu-list a:focus-visible {
  background: var(--menu-hover-bg);
  border-color: var(--menu-hover-border);
  outline: none;
}

/* Caixa fixa do ícone (garante o MESMO tamanho horizontal) */
#main-menu .menu-list .icon-wrap {
  width: var(--menu-icon-box);
  min-width: var(--menu-icon-box);
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

/* Ícone em si */
#main-menu .menu-list i {
  font-size: var(--menu-icon-size);
  line-height: 1;
}

/* Texto */
#main-menu .menu-list .label {
  display: inline-block;
  white-space: nowrap;
}

/* Estado ativo (opcional) */
#main-menu .menu-list a.active {
  background: var(--menu-hover-bg);
  border-color: var(--menu-hover-border);
  font-weight: 700;
}

/* Responsivo: reduz um pouco o espaçamento em telas bem pequenas */
@media (max-width: 400px) {
  :root {
    --menu-gap: 4px;
    --menu-pad-y: 6px;
    --menu-pad-x: 8px;
  }
}