/* ==========================================================================
   AJUSTES NOSSOS — carregado DEPOIS do sistema.css

   ⚠️ Nunca editar sistema.css. Aquele arquivo é do handoff do Claude Design
   e é substituído inteiro quando vier versão nova. O que for nosso mora aqui.
   ========================================================================== */

/* O rótulo do menu não quebra linha: "Ordens de serviço" cabe em uma só. */
.co-nav > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* O item do menu ganha 5px à direita.
   Por quê: quando o menu precisa rolar, a barra de rolagem come ~11px da
   largura — e "Ordens de serviço" passa a não caber por 4px. Apertar o
   respiro da direita é imperceptível e resolve em qualquer navegador,
   com ou sem barra. Tentar afinar a barra NÃO resolve: o Chrome ignora a
   largura do ::-webkit-scrollbar quando existe scrollbar-width. */
.co-nav { padding-right: 10px; gap: 10px; }

/* Barra de rolagem do menu, discreta. */
.co-side__nav { scrollbar-color: rgba(255,255,255,0.18) transparent; }
.co-side__nav::-webkit-scrollbar { width: 6px; }
.co-side__nav::-webkit-scrollbar-track { background: transparent; }
.co-side__nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 999px;
}
.co-side__nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.30); }

/* Ações do cabeçalho da tela. */
.co-pagehead__acoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* O link "trocar" do seletor de loja. */
.co-storepick a { color: var(--co-gray); text-decoration: none; font-weight: 700; }
.co-storepick a:hover { color: var(--co-ink); }

/* Bloco "esta tela ainda não foi construída" — o ícone acima do título. */
.co-empty svg { color: var(--co-gray-light); margin-bottom: 4px; }