/* ============================================================================
   SellmaxAZ — Componentes base (TAREFA-010). Re-skin sobre a estrutura das 21 telas
   (ERP Screens/assets/base.css) — mesmos nomes de classe, valores vêm de tokens.css.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
/* achado MEDIUM do /code-review (reauditoria 15/08): tirar overflow-x incondicional do .mainnav
   não deixou nenhuma rede de segurança pra DESIGN.md §10 ("a página nunca rola de lado") acima
   de 1024px — testado sem overflow real hoje (EN "Purchasing" cabe até no limite exato de
   1025px), mas é barato garantir a invariante sempre, não só nos casos já testados. */
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  background: var(--canvas);
  color: var(--ink);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
/* Grid sutil de fundo (mock assets/base.css) — achado na cópia fiel: existia o gancho
   `class="app-bg"` no <body> desde o início da TAREFA-010, mas a regra nunca foi portada. */
body.app-bg {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* achado na cópia fiel: faltava o reset de sublinhado do mock (assets/base.css `a{text-decoration:
   none} a:hover{text-decoration:underline}") — links e botões `<a class="btn">` apareciam
   sublinhados/azuis por padrão do navegador. */
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font: var(--text-h1); margin: 0; }
h2 { font: var(--text-h2); margin: 0; }
h3 { font: var(--text-h3); margin: 0; }
.small { font: var(--text-small); }
.eyebrow { font: var(--text-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: var(--space-2); }
.mono { font-family: var(--font-mono); }
.text-secondary { color: var(--ink-2); }
/* ink-3 (DESIGN.md §7): só eyebrow/texto>=18px bold/ícone decorativo — NUNCA corpo/célula/hint */
.text-decorative { color: var(--ink-3); }
.caption { font: var(--text-small); color: var(--ink-2); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.spacer { flex: 1; }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.hidden { display: none !important; }

/* ---------- Ícone (DESIGN.md §4): sempre currentColor, nunca <img> (perderia a herança) ---------- */
.icon {
  width: 20px; height: 20px;
  stroke-width: 1.8;
  flex: none;
  color: inherit; /* herda: branco no botão primário, ink-2 na tabela, cor da badge nos semânticos */
}
.icon--16 { width: 16px; height: 16px; stroke-width: 2; }
.icon--24 { width: 24px; height: 24px; stroke-width: 1.7; }

/* ---------- Layout / casca ---------- */
.topbar {
  height: 52px; display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-5); background: var(--surface-inverse); color: #fff;
  position: sticky; top: 0; z-index: var(--z-topbar);
}
.topbar .brand { display: flex; align-items: center; gap: var(--space-2); color: #fff; text-decoration: none; }
.topbar .brand svg { height: 22px; width: auto; }
.statusbar {
  height: 34px; display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-5);
  background: var(--surface-2); border-bottom: 1px solid var(--line); font: var(--text-small); color: var(--ink-2);
  position: sticky; top: 52px; z-index: var(--z-sticky);
}
.stat-chip { display: flex; align-items: center; gap: var(--space-2); }
.stat-chip b { color: var(--ink); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); display: inline-block; }
.dot.pulse { box-shadow: 0 0 0 0 var(--success); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 70% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

.mainnav {
  display: flex; gap: var(--space-1); padding: 0 var(--space-4); background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 86px; z-index: var(--z-dropdown);
}
.navmod { position: relative; }
.navmod__trigger {
  display: flex; align-items: center; gap: var(--space-2); height: 46px; padding: 0 var(--space-3);
  background: transparent; border: 0; color: var(--ink-2); font: var(--text-body); cursor: pointer;
  border-bottom: 2px solid transparent;
}
.navmod.is-active .navmod__trigger { color: var(--ink); border-bottom-color: var(--brand); font-weight: 600; }
.navmod__trigger:hover { color: var(--ink); }
/* achado na cópia fiel: usava ink-3 aqui — PROIBIDO em texto de corpo (§7), esse label não é
   eyebrow nem ≥18px bold. Corrigido pra ink-2, mesmo tom "apagado" sem violar AAA/AA. */
.navmod.is-disabled .navmod__trigger { color: var(--ink-2); opacity: .6; cursor: default; }
.navmod__menu {
  position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2); display: none; flex-direction: column; gap: 2px;
}
.navmod:hover .navmod__menu, .navmod:focus-within .navmod__menu { display: flex; }
.navmod__menu a, .navmod__menu span.soon {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font: var(--text-small);
}
.navmod__menu a:hover { background: var(--bg-hover); color: var(--ink); }
.navmod__menu a.is-active { color: var(--brand-text); font-weight: 600; }
.navmod__menu span.soon { color: var(--ink-2); cursor: not-allowed; justify-content: space-between; }
.navmod__menu span.soon em {
  font-style: normal; font-size: 10px; color: var(--ink-2); margin-left: auto;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 6px; white-space: nowrap;
}

.usermenu { position: relative; margin-left: auto; }
.topbar__pill {
  display: flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,.1);
  border: 0; color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  cursor: pointer; font: var(--text-small);
}
.usermenu__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-dropdown); min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2); display: none; flex-direction: column; gap: 2px;
  color: var(--ink);
}
.usermenu:hover .usermenu__pop, .usermenu:focus-within .usermenu__pop { display: flex; }
.usermenu__pop a, .usermenu__pop button.langopt {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font: var(--text-small);
  background: none; border: 0; cursor: pointer; text-align: left; width: 100%;
}
.usermenu__pop a:hover, .usermenu__pop button.langopt:hover { background: var(--bg-hover); color: var(--ink); }
.usermenu__sep { height: 1px; background: var(--line); margin: var(--space-2) 0; }
.langsel { padding: var(--space-2) var(--space-3); display: flex; gap: var(--space-2); align-items: center; }
.langsel .icon { color: var(--ink-2); }

/* Larguras copiadas 1:1 dos mocks (suppliers-list.html/supplier-detail.html) — wide-main não tem
   teto de largura no mock; det-main usa 1000px literal (não o token --container-narrow de 720px,
   que é genérico e não o que a tela de fornecedor usa). */
.wide-main { width: 100%; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.det-main { width: 100%; max-width: 1000px; margin-inline: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- Botão (DESIGN.md §4) ---------- */
.btn {
  height: 37px; padding: 0 17px; border-radius: var(--radius-md); font: 600 15px/1 var(--font-sans);
  display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid transparent;
  cursor: pointer; transition: background var(--duration-fast) var(--easing-standard);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-text); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { background: var(--bg-hover); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--bg-hover); color: var(--ink); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Campo ---------- */
/* min-width:0 deixa o campo ENCOLHER dentro de um flex row (sem isso, o min-content do input
   trava a linha e o modal estoura na horizontal — achado 1 da validação do Rauan, 06/10). */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font: 600 13px var(--font-sans); color: var(--ink); }
.input, .select, .textarea {
  height: 37px; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); padding: 0 var(--space-3); font: var(--text-body);
  /* width:100% é do base.css do MOCK (assets/base.css:150) — tinha se perdido na portagem da
     TAREFA-010; sem ele, o input fica na largura intrínseca do browser e não acompanha o .field. */
  width: 100%;
}
.textarea { height: auto; min-height: 80px; padding: var(--space-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.field__hint { font: var(--text-small); color: var(--ink-2); }
.field__error { font: var(--text-small); color: var(--danger); display: flex; align-items: center; gap: 6px; }
.field.has-error .input { border-color: var(--danger); }
.input-group { position: relative; }
.input-group .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.input-group .input { padding-left: 36px; }

/* ---------- Badge (§4: cor + ÍCONE + texto, cor nunca canal único) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-sans); padding: 5px 10px 5px 8px; white-space: nowrap;
}
.badge--viable { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
.badge--caution { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning); }
.badge--rejected { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.badge--neutral { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.badge--info { background: var(--info-bg); color: var(--info); border: 1px dashed var(--info); }
.badge--financial { border-style: dashed; }

/* ---------- Data table (regra do dinheiro: sempre ink, mono, direita) ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  /* achado real da reauditoria 15/08 (cópia fiel): o mock (ERP Screens/assets/base.css:180) usa
     uma barra ESCURA fixa (mesma linguagem do topbar) + sticky no scroll — nossa implementação
     tinha ido pra --surface-2 (superfície clara comum), desvio de estrutura, não só de pele. */
  background: var(--surface-inverse); font: var(--text-eyebrow); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: var(--z-sticky); white-space: nowrap;
}
.data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font: var(--text-body); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--surface-2); }
.data-table th.num, .data-table td.num { text-align: right; }
.data-table td.num, .money { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.money--negative::before { content: "\2212 "; } /* U+2212, nunca hífen */
.product-name { font: 600 var(--text-body); color: var(--ink); }
.cell-meta { display: block; font: var(--text-data-sm); color: var(--ink-2); }

/* ---------- Ações (menu flutuante da linha da tabela) ----------
   Estrutura/espaçamento copiados 1:1 do mock (ERP Screens/screens/suppliers-list.html).
   Único desvio deliberado do mock (pedido do Rauan): lá é :hover; aqui é clique + fecha fora,
   porque o mock nunca precisou funcionar em touch/mobile. */
.rowmenu { position: relative; }
.rowmenu__pop {
  position: absolute; right: 0; top: 100%; z-index: var(--z-dropdown); min-width: 170px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-2); display: none; flex-direction: column; gap: 2px;
}
.rowmenu__pop.is-open { display: flex; }
/* achado real da reauditoria 15/08: .table-wrap tem overflow:auto (precisa, pro scroll
   horizontal) — isso recorta qualquer popup que abra PRA BAIXO além da borda da tabela (linhas
   perto do fim). rowmenu.js mede e troca pra cima quando não cabe. */
.rowmenu__pop.opens-up { top: auto; bottom: 100%; }
.rowmenu__pop a {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink-2);
  font: var(--text-small); text-decoration: none; white-space: nowrap; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
}
.rowmenu__pop a:hover { background: var(--bg-hover); color: var(--ink); }

/* ---------- KPI card ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.card--pad { padding: var(--space-4); }
.kpi { padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.kpi__label { font: var(--text-small); color: var(--ink-2); }
.kpi__value { font: 600 24px/1.2 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi__delta { font: var(--text-small); }
.kpi.decision-gate { border-left: 3px solid var(--brand); } /* único card com borda cobalto (§4) */

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--bg-backdrop); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
}
.modal-backdrop.hidden { display: none; }
.modal { width: 420px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow: auto;
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.modal__header { padding: var(--space-4) var(--space-4) 0; }
.modal__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.modal__footer { padding: var(--space-4); display: flex; justify-content: flex-end; gap: var(--space-2); border-top: 1px solid var(--line); }

/* ---------- Toast / banner ---------- */
.toast {
  position: fixed; top: var(--space-4); right: var(--space-4); z-index: var(--z-toast);
  background: var(--surface); border-left: 3px solid var(--info); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); display: flex; gap: var(--space-2);
  align-items: flex-start; min-width: 280px; max-width: 360px;
}
.toast--success { border-left-color: var(--success); }
.toast--warning { border-left-color: var(--warning); }
.toast--danger { border-left-color: var(--danger); }
.toast .icon--success { color: var(--success); }
.toast .icon--warning { color: var(--warning); }
.toast .icon--danger { color: var(--danger); }
.toast .icon--info { color: var(--info); }
.banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); display: flex; gap: var(--space-2); align-items: flex-start; }
.banner--info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); }
.banner--warning { background: var(--warning-bg); border: 1px solid var(--warning); color: var(--warning); }
.banner--danger { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); }
.empty .icon { width: 40px; height: 40px; color: var(--ink-3); } /* ink-3 permitido: ícone decorativo (§7) */

/* ---------- Tabs (ficha do fornecedor) ---------- */
.seg-tabs { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 3px; border-radius: var(--radius-md); max-width: 100%; }
.seg-tabs button {
  border: 0; background: transparent; color: var(--ink-2); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); font: 600 var(--text-small); cursor: pointer; white-space: nowrap;
}
.seg-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.hidden-view { display: none; }

.kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--ink-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-6); }

.foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- Barra de salvamento fixa (dirty-state) ---------- */
.savebar {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: none; justify-content: flex-end;
  gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 12px rgba(15,18,25,.06);
}
.savebar.is-dirty { display: flex; }

/* ---------- Loader (DESIGN.md §9 — mark varrendo + girando) ----------
   Ciclo 5.4s = 4x(percurso 0.99s [18.33%] + giro 0.36s [6.67%]). Bloco rígido: hastes+rastro+ponto
   giram juntos em 4 saltos de 90° (nunca contínuo), pausando durante o percurso — a batida é o
   instante em que o giro começa. Primeira implementação real (DESIGN.md §10: calibragem fina é
   tarefa de implementação, ajustada ao vivo — os timings abaixo são o ponto de partida aprovado). */
.loader { display: inline-flex; align-items: center; justify-content: center; }
.loader svg { overflow: visible; }
.loader--stage { width: 40px; height: 40px; }
.loader--inline { width: 20px; height: 20px; }
.loader__group {
  transform-origin: 50% 50%;
  animation: loader-turn 5.4s infinite;
}
.loader__haste { stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; }
.loader__dot {
  fill: var(--brand);
  animation: loader-dot-travel 5.4s infinite;
}
@keyframes loader-turn {
  0%,    18.33% { transform: rotate(0deg);   animation-timing-function: cubic-bezier(.4,.08,.25,1); }
  25%,   43.33% { transform: rotate(90deg);  animation-timing-function: cubic-bezier(.4,.08,.25,1); }
  50%,   68.33% { transform: rotate(180deg); animation-timing-function: cubic-bezier(.4,.08,.25,1); }
  75%,   93.33% { transform: rotate(270deg); animation-timing-function: cubic-bezier(.4,.08,.25,1); }
  100%           { transform: rotate(360deg); }
}
@keyframes loader-dot-travel {
  0%            { transform: translateX(-7px); animation-timing-function: cubic-bezier(.55,.06,.8,.5); }
  18.33%        { transform: translateX(7px); }
  18.34%, 25%   { transform: translateX(7px); }
  43.33%        { transform: translateX(-7px); animation-timing-function: cubic-bezier(.55,.06,.8,.5); }
  43.34%, 50%   { transform: translateX(-7px); }
  68.33%        { transform: translateX(7px); animation-timing-function: cubic-bezier(.55,.06,.8,.5); }
  68.34%, 75%   { transform: translateX(7px); }
  93.33%        { transform: translateX(-7px); }
  93.34%, 100%  { transform: translateX(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .loader__group { animation: none; }
  .loader__dot { animation: loader-pulse 2s ease-in-out infinite; }
}
@keyframes loader-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.loader-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border-radius: inherit;
}

/* ---------- Responsive (DESIGN.md §10) ---------- */
@media (max-width: 1024px) {
  /* overflow-x só entra AQUI, nunca incondicional (achado real da reauditoria 15/08): a base
     tinha overflow-x:auto sempre ligado, o que força overflow-y:auto implícito e RECORTA o
     .navmod__menu — ele abre para BAIXO, saindo da caixa do próprio .mainnav, então some
     mesmo com display:flex correto (bug invisível a olho nu sem checar elementFromPoint). Em
     telas largas o nav cabe inteiro sem rolagem, então não precisa de overflow nenhum ali. */
  .mainnav { flex-wrap: nowrap; overflow-x: auto; }
}
@media (max-width: 768px) {
  .grid2 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .table-wrap { overflow-x: auto; }
  .wide-main, .det-main { padding: var(--space-3); }
  /* achado real da reauditoria 15/08: sem isso, "Histórico de pedidos"/"Produtos fornecidos"
     quebravam em 2 linhas dentro do próprio botão da aba (sem white-space:nowrap), deixando a
     barra de abas com alturas desiguais. Mesmo princípio das tabelas (DESIGN.md §10): rola
     dentro do próprio contêiner, a página nunca rola de lado. */
  .seg-tabs {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
  /* achado na validação visual (screenshot mobile 390, TAREFA-010): a nav de módulos e a
     statusbar já rolam de lado dentro do próprio contêiner (nunca a página — testado), mas sem
     nenhum sinal visual de que dá pra arrastar, o corte de texto no meio da palavra parecia bug.
     Máscara de esmaecimento na borda direita só entra no mobile, onde sabemos que sempre sobra
     conteúdo fora da tela — em telas largas o nav cabe inteiro, sem necessidade de mascarar. */
  .mainnav, .statusbar {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  }
  .statusbar { flex-wrap: nowrap; overflow-x: auto; }
  .stat-chip { white-space: nowrap; } /* flex-wrap só evita quebra de LINHA do chip — o texto de
    dentro (ex. "9 ativo") ainda quebrava sozinho sem isso */
}