/* ============================================================================
 * DATAMAP EFC — Chrome global (navbar). Carregado após efc-components.css.
 * Brand-bar Vale (verde) com nav primária + cluster de ferramentas à direita.
 * Cor de MARCA Vale só no chrome; nenhuma cor de dado aqui.
 * ========================================================================== */

/* Altura do chrome em páginas ML (navbar 56 + sub-barra contexto 45 + margem 4).
 * Fonte única de verdade p/ os roots de altura cheia (#ml-*-root). */
:root { --efc-ml-chrome: 106px; }

.efc-nav { padding: 0; min-height: 56px; box-shadow: var(--efc-shadow); }
.efc-nav__inner { display: flex; align-items: center; gap: var(--efc-4);
  flex-wrap: nowrap; }

.efc-nav__brand { display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: .02em; font-size: 1.15rem;
  color: #fff !important; white-space: nowrap; margin-right: var(--efc-2);
  text-decoration: none; }
.efc-nav__brand .efc-brand-accent { color: var(--vale-gold); }
.efc-brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.efc-brand-word { display: inline-block; }

/* --- nav primária --- */
.efc-nav__primary { display: flex; flex-wrap: nowrap; gap: 2px; align-items: center;
  margin: 0; padding: 0; list-style: none; }
.efc-nav__link { display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--efc-radius-sm);
  color: rgba(255,255,255,.85) !important; font-size: .9rem; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  transition: background 150ms, color 150ms; }
.efc-nav__link:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.efc-nav__link.is-active { background: rgba(255,255,255,.18); color: #fff !important;
  font-weight: 600; }
.efc-nav__link:focus-visible { outline: 2px solid var(--vale-gold); outline-offset: 2px; }
.efc-nav__link .efc-icon { opacity: .92; }

/* --- cluster de ferramentas (direita) --- */
.efc-nav__tools { display: flex; align-items: center; gap: var(--efc-2);
  margin-left: auto; flex-wrap: nowrap; }

/* busca KM */
.efc-nav__search { display: flex; align-items: center; margin: 0; }
.efc-nav__search .input-group { width: 200px; }
.efc-nav__search .form-control { border: none; font-size: .85rem; }
.efc-nav__search .form-control:focus { box-shadow: none; }
/* a11y (WCAG 2.4.7 Focus Visible): o reset acima removia o glow de foco do
 * .form-control, deixando a busca por KM SEM indicador visível (só o caret) —
 * usuário de teclado não via que o campo estava focado. Anel dourado INSET no
 * foco de teclado: não clipa com o botão adjacente do input-group e contrasta
 * no fundo branco do campo. :focus-visible → o foco por mouse segue limpo. */
.efc-nav__search .form-control:focus-visible { box-shadow: inset 0 0 0 2px var(--vale-gold); }
.efc-nav__search .btn { border: none; background: var(--vale-gold);
  color: var(--vale-ink); display: inline-flex; align-items: center; }
.efc-nav__search .btn:hover { background: #d99e0f; }

/* dropdown de trecho */
.efc-nav__trecho { display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.10); color: #fff !important;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--efc-radius-sm);
  padding: 5px 10px; font-size: .82rem; white-space: nowrap; cursor: pointer; }
.efc-nav__trecho:hover { background: rgba(255,255,255,.20); }
.efc-nav__trecho:focus-visible { outline: 2px solid var(--vale-gold); outline-offset: 2px; }

/* toggle de tema (icon-pill) */
#dm-toggle { display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 999px; padding: 5px 12px; font-size: .8rem;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background 150ms; }
#dm-toggle:hover { background: rgba(255,255,255,.20); }
#dm-toggle:focus-visible { outline: 2px solid var(--vale-gold); outline-offset: 2px; }
#dm-toggle-icon { font-size: 1rem; }

/* avatar */
.efc-nav__avatar { display: inline-flex; padding: 2px; text-decoration: none; }
.efc-nav__avatar .rounded-circle { border: 2px solid rgba(255,255,255,.45);
  background: var(--vale-green-700); }

/* toggler (mobile) */
.efc-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }

/* --- responsivo: empilha quando colapsa --- */
@media (max-width: 991.98px) {
  .efc-nav__primary { flex-wrap: wrap; margin-top: var(--efc-2); }
  .efc-nav__tools { margin-left: 0; margin-top: var(--efc-2);
    flex-wrap: wrap; gap: var(--efc-2); }
  .efc-nav__search .input-group { width: 100%; }
}

/* === BARRA DE CONTEXTO ML (sub-bar abaixo do nav, só em /ml/) === */
.efc-ctxbar { background: var(--vale-green-700); border-top: 1px solid rgba(255,255,255,.12); }
.efc-ctxbar__inner { display: flex; align-items: center; gap: var(--efc-3);
  flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
.efc-ctxbar__spacer { flex: 1 1 auto; min-width: 12px; }

/* contexto ML ativo (badge + switcher de modos) — compacto na brand-bar */
/* flex-wrap: o badge (pílulas master/bundle + grupo de 4 modos) somava ~493px
 * num único item nowrap → estourava a viewport mobile (≤390px) e a página
 * rolava lateralmente. Deixar os 3 filhos quebrarem em linhas (o btn-group
 * em si segue nowrap, ~254px, cabe) mata o overflow sem perder nada. No
 * desktop cabe numa linha → sem efeito. white-space:nowrap segue (texto das
 * pílulas em 1 linha); é ortogonal ao flex-wrap. */
#active-context-badge { margin: 0 !important; gap: 4px !important; white-space: nowrap;
  flex-wrap: wrap; row-gap: 4px; max-width: 100%; }
#active-context-badge .badge { font-size: .72rem; font-weight: 600; }
#active-context-badge .ctx-mode-btn {
  font-size: .72rem; padding: 3px 8px; line-height: 1.1;
  border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.9); }
#active-context-badge .ctx-mode-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
#active-context-badge .ctx-mode-btn.active {
  background: var(--vale-gold); color: var(--vale-ink); border-color: var(--vale-gold); }