/* ============================================================================
   Capi Când-IA Pro — Nav Item (Fase 1)
   .ds-nav-item          → item base (icon + label + opcional shortcut/count)
   .ds-nav-item-primary  → variante com texto dourado (CTA principal da nav)

   IMPORTANTE: usa !important nas cores pra vencer browser defaults
   (a:link / a:visited tem alta especificidade no user agent stylesheet).
   ============================================================================ */

.ds-nav-item,
a.ds-nav-item,
a.ds-nav-item:link,
a.ds-nav-item:visited,
a.ds-nav-item:hover,
a.ds-nav-item:focus,
a.ds-nav-item:active,
button.ds-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 0 8px;
  padding: 8px 12px;
  border-radius: var(--ds-radius);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  font-weight: 500;
  /* #888 muted — combina com o mockup; mais escuro que --ds-text-2 (#aaa) */
  color: #888 !important;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: var(--ds-trans-fast);
  text-decoration: none !important;
}

.ds-nav-item:hover,
a.ds-nav-item:hover,
button.ds-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ds-text) !important;
}

.ds-nav-item.is-active,
a.ds-nav-item.is-active,
button.ds-nav-item.is-active {
  background: var(--ds-gold-dim);
  color: var(--ds-gold) !important;
}

/* ─── Primary (CTA · "Nova conversa" dourado) ─── */
.ds-nav-item-primary,
.ds-nav-item.ds-nav-item-primary,
a.ds-nav-item-primary,
a.ds-nav-item-primary:link,
a.ds-nav-item-primary:visited,
a.ds-nav-item-primary:hover,
a.ds-nav-item-primary:focus,
a.ds-nav-item-primary:active,
button.ds-nav-item-primary {
  color: var(--ds-gold) !important;
}

.ds-nav-item-primary:hover,
a.ds-nav-item-primary:hover,
button.ds-nav-item-primary:hover {
  background: rgba(212,160,23,0.06);
  color: var(--ds-gold-hover) !important;
}

.ds-nav-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Atalho de teclado (⌘K etc.) à direita */
.ds-nav-item-shortcut {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  color: var(--ds-text-muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Contador / count à direita (ex: "5" pra projetos) */
.ds-nav-item-count {
  margin-left: auto;
  font-family: var(--ds-font-mono);
  font-size: 10px;
  color: #444;
}

/* Chevron à direita (ex: pra "Mais" expansível) */
.ds-nav-item-chevron {
  margin-left: auto;
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2.5;
}