/* Navegação: item ativo com ícone preenchido, rótulo em negrito e pílula em selected-subtle; nunca a cor da ação. */

.app-navigation {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
  padding-inline: var(--space-4);
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-min-height);
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--muted);
  text-decoration: none;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item[aria-current="page"] {
  background: var(--selected-subtle);
  color: var(--text);
  font-weight: 700;
}

.nav-item .nav-icon-shape {
  fill: currentcolor;
}

.nav-item .nav-icon-cut {
  stroke: var(--selected-subtle);
}

.nav-item:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

@media (hover: hover) {
  .nav-item:not([aria-current="page"]):hover {
    color: var(--text);
  }
}

@media (width <= 760px) {
  .shell-app .app-navigation {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    justify-content: space-around;
    margin: 0;
    padding: var(--space-2) max(var(--space-4), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--raised);
    box-shadow: var(--elevation);
  }

  .nav-item {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    min-height: 58px;
    padding: var(--space-1);
    border-radius: var(--radius-surface);
    font-size: var(--font-size-support);
  }
}

/* Com texto muito ampliado, o rótulo encolhe em vez de empurrar os outros destinos para fora da tela. */
.nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (forced-colors: active) {
  .app-navigation {
    border-color: CanvasText;
  }

  .nav-item[aria-current="page"] {
    border-color: Highlight;
  }

  .nav-item .nav-icon-cut {
    stroke: Canvas;
  }
}