/* ==========================================================================
   Compra Automatizada — Aplicacao dos tokens
   Carregado por ULTIMO no index.html, de proposito: sobrepoe os defaults do
   Bootstrap e do template (style.css) sem precisar editar as 35 mil linhas.
   Tokens: /css/custom-base.css
   ========================================================================== */

/* ---------- Base ---------- */
body {
  font-family: var(--font-sistema), sans-serif;
  font-size: var(--texto-base);
  color: var(--cor-texto);
  background-color: var(--cor-base-fundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Escala tipografica ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titulo), sans-serif;
  color: var(--cor-texto);
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

h1 { font-size: var(--texto-xl); font-weight: var(--peso-semi); }
h2 { font-size: var(--texto-xl); font-weight: var(--peso-semi); }
h3 { font-size: var(--texto-lg); font-weight: var(--peso-semi); }
h4 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h5 { font-size: var(--texto-md); font-weight: var(--peso-semi); }
h6 { font-size: var(--texto-base); font-weight: var(--peso-semi); }

small, .small { font-size: var(--texto-xs); }
.text-muted { color: var(--cor-texto-suave) !important; }

/* Titulo de secao de formulario: era so um padding-top solto.
   Agora tem regra divisoria e hierarquia clara. */
.form-sub-title {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  padding-top: 0;
  margin-top: var(--esp-5);
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
}

.form-sub-title:first-child { margin-top: 0; }

/* ---------- Cards: borda leve em vez de sombra dura ---------- */
.card {
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}

.card .card-body { padding: var(--esp-5); }

/* ---------- Botoes ---------- */
.btn {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  border-radius: var(--raio-md);
  padding: 0.5rem 1rem;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  line-height: 1.4;
}

.btn:focus, .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primaria-100);
}

.btn-primary,
.btn-primary:visited {
  background-color: var(--cor-btn-primary-fundo);
  border-color: var(--cor-btn-primary-borda);
  color: var(--cor-btn-primary-letra);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--cor-btn-primary-fundo-selecionado);
  border-color: var(--cor-btn-primary-borda-selecionado);
  color: var(--cor-btn-primary-letra-selecionado);
}

/* Secundario deixa de ser cinza-chumbo e passa a ser contorno neutro */
.btn-secondary,
.btn-secondary:visited {
  background-color: var(--cor-superficie);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  background-color: var(--neutro-100);
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.btn-danger {
  background-color: var(--cor-erro);
  border-color: var(--cor-erro);
}

/* Botao de ACAO (conversao) — laranja.
   Use no maximo UM por tela, no botao de maior valor. Aplicado por className,
   mantendo color="primary" no componente para o fallback nao ficar sem estilo. */
.btn.btn-acao,
.btn.btn-acao:visited {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
  color: var(--cor-acao-letra);
  font-weight: var(--peso-semi);
  box-shadow: 0 1px 2px 0 rgba(194, 65, 12, 0.24);
}

.btn.btn-acao:hover,
.btn.btn-acao:active,
.btn.btn-acao:focus {
  background-color: var(--cor-acao-hover);
  border-color: var(--cor-acao-hover);
  color: var(--cor-acao-letra);
}

.btn.btn-acao:focus, .btn.btn-acao:focus-visible {
  box-shadow: 0 0 0 3px var(--cor-acao-fundo);
}

.btn:disabled, .btn.disabled { opacity: .5; }

/* ---------- Badges tonais (fundo claro + texto escuro) ---------- */
.badge {
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
  padding: 0.3rem 0.6rem;
  border-radius: var(--raio-full);
  border: 1px solid transparent;
}

.badge.bg-success {
  background-color: var(--cor-sucesso-fundo) !important;
  border-color: var(--cor-sucesso-borda);
  color: var(--cor-sucesso) !important;
}

.badge.bg-warning {
  background-color: var(--cor-alerta-fundo) !important;
  border-color: var(--cor-alerta-borda);
  color: var(--cor-alerta) !important;
}

.badge.bg-danger {
  background-color: var(--cor-erro-fundo) !important;
  border-color: var(--cor-erro-borda);
  color: var(--cor-erro) !important;
}

.badge.bg-info {
  background-color: var(--cor-info-fundo) !important;
  border-color: var(--cor-info-borda);
  color: var(--cor-info) !important;
}

.badge.bg-primary {
  background-color: var(--primaria-50) !important;
  border-color: var(--primaria-200);
  color: var(--primaria-800) !important;
}

.badge.bg-secondary {
  background-color: var(--neutro-100) !important;
  border-color: var(--cor-borda);
  color: var(--neutro-600) !important;
}

/* ---------- Formularios ---------- */
.form-label, label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-1);
}

.form-control, .form-select {
  font-size: var(--texto-base);
  color: var(--cor-texto);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  padding: 0.5rem 0.75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control::placeholder { color: var(--cor-texto-fraco); }

.form-control:focus, .form-select:focus {
  border-color: var(--primaria-500);
  box-shadow: 0 0 0 3px var(--primaria-100);
}

.form-control.is-invalid, .form-control:invalid[class*="is-invalid"] {
  border-color: var(--cor-erro);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--cor-erro-fundo);
}

.invalid-feedback { font-size: var(--texto-xs); color: var(--cor-erro); }

/* ---------- Tabelas (react-data-table-component) ---------- */
.rdt_TableHeadRow {
  border-bottom: 1px solid var(--cor-borda) !important;
  min-height: 44px !important;
}

.rdt_TableCol {
  font-size: var(--texto-xs) !important;
  font-weight: var(--peso-semi) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave) !important;
}

.rdt_TableRow {
  border-bottom: 1px solid var(--cor-borda) !important;
  min-height: 52px !important;
  font-size: var(--texto-base) !important;
  color: var(--cor-texto) !important;
}

/* As 30 listas passam customStyles inline com radius 25px e hover azulado.
   Estilo inline só perde para !important — daí o uso aqui. */
.rdt_TableRow:hover {
  background-color: var(--primaria-50) !important;
  border-radius: 0 !important;
  outline: none !important;
}

.rdt_TableCell { color: var(--cor-texto) !important; }
.rdt_Pagination { border-top: 1px solid var(--cor-borda) !important; color: var(--cor-texto-suave) !important; }

/* ---------- Modal ---------- */
.modal-content {
  border: none;
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-modal);
}

.modal-header {
  border-bottom: 1px solid var(--cor-borda);
  padding: var(--esp-4) var(--esp-5);
}

.modal-body { padding: var(--esp-5); }

.modal-footer {
  border-top: 1px solid var(--cor-borda);
  padding: var(--esp-3) var(--esp-5);
  gap: var(--esp-2);
}

/* ---------- Topo ---------- */
.navbar {
  background: var(--cor-topo-fundo);
  color: var(--cor-topo-letra);
  border-bottom: 1px solid var(--primaria-900);
}

.navbar .navbar-menu-wrapper {
  height: auto;
  padding-top: var(--esp-4);
  padding-bottom: var(--esp-4);
}

/* ---------- Menu lateral ----------
   Prefixo .menu-wrapper em tudo: o style.css legado tem regras de hover com
   especificidade alta (.sidebar .nav:not(.sub-menu)>.nav-item:hover>.nav-link,
   color:#fff e font-weight:900) que deixavam o texto branco sobre fundo claro
   e faziam o item "pular". Aqui elas sao neutralizadas. */
.menu-wrapper .sidebar .nav .nav-item,
.menu-wrapper .sidebar .nav .nav-item:hover {
  background: transparent;
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 2px var(--esp-2);
  padding: 0.45rem var(--esp-3) 0.45rem 0.45rem;
  border-radius: var(--raio-md);
  color: var(--cor-menu-letra);
  font-family: var(--font-sistema), sans-serif;
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  text-decoration: none;
  background: transparent;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Barra de destaque a esquerda: cresce no hover, fica cheia no ativo */
.menu-wrapper .sidebar .nav .nav-item > .nav-link::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--esp-2));
  top: 50%;
  width: 3px;
  height: 60%;
  border-radius: 0 var(--raio-full) var(--raio-full) 0;
  background: var(--primaria-500);
  transform: translateY(-50%) scaleY(0);
  transition: transform .2s ease, background-color .2s ease;
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link .menu-title,
.menu-wrapper .sidebar .nav .nav-item:hover > .nav-link .menu-title {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .18s ease;
}

/* Icone dentro de um "chip" quadrado */
.menu-wrapper .menu-icon-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-md);
  background: var(--neutro-100);
  color: var(--cor-menu-icone);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.menu-wrapper .menu-icon-chip .menu-icon,
.menu-wrapper .menu-icon-chip .menu-icon:hover {
  margin: 0;
  color: inherit;
}

/* Hover */
.menu-wrapper .sidebar .nav .nav-item > .nav-link:hover,
.menu-wrapper .sidebar .nav .nav-item > .nav-link:focus-visible {
  background: var(--primaria-100);
  color: var(--primaria-800);
  font-weight: var(--peso-medio);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link:hover::before,
.menu-wrapper .sidebar .nav .nav-item > .nav-link:focus-visible::before {
  transform: translateY(-50%) scaleY(1);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link:hover .menu-icon-chip,
.menu-wrapper .sidebar .nav .nav-item > .nav-link:focus-visible .menu-icon-chip {
  background: var(--cor-superficie);
  color: var(--primaria-700);
  box-shadow: var(--sombra-md);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link:hover .menu-title {
  transform: translateX(2px);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link:focus-visible {
  outline: 2px solid var(--primaria-400);
  outline-offset: 1px;
}

/* Item da tela atual */
.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo,
.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo:hover {
  background: linear-gradient(135deg, var(--primaria-700), var(--primaria-900));
  color: var(--cor-texto-inverso);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-lg);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo::before {
  background: var(--cor-acao);
  transform: translateY(-50%) scaleY(1);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo .menu-icon-chip {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cor-texto-inverso);
  box-shadow: none;
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo .menu-title {
  transform: none;
}

/* Grupo (Fornecedores) com subitem ativo */
.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo-grupo {
  color: var(--primaria-800);
  font-weight: var(--peso-semi);
}

.menu-wrapper .sidebar .nav .nav-item > .nav-link.menu-ativo-grupo .menu-icon-chip {
  background: var(--primaria-100);
  color: var(--primaria-700);
}

/* Seta do grupo */
.menu-wrapper .menu-chevron {
  flex: 0 0 auto;
  color: var(--cor-texto-fraco);
  transition: transform .2s ease, color .18s ease;
}

.menu-wrapper .nav-link:hover .menu-chevron { color: var(--primaria-700); }
.menu-wrapper .nav-link[aria-expanded="true"] .menu-chevron { transform: rotate(90deg); }

/* Submenu: linha-guia e itens mais compactos */
.menu-wrapper .sidebar .sub-menu {
  margin: 2px 0 var(--esp-2) calc(var(--esp-2) + 23px);
  padding: 0 0 0 var(--esp-2);
  border-left: 1px solid var(--cor-borda);
}

.menu-wrapper .sidebar .sub-menu .nav-item > .nav-link {
  margin: 1px 0;
  padding: 0.3rem var(--esp-3) 0.3rem 0.3rem;
  font-size: var(--texto-sm);
}

.menu-wrapper .sidebar .sub-menu .nav-item > .nav-link::before {
  left: calc(-1 * var(--esp-2) - 1px);
}

.menu-wrapper .sidebar .sub-menu .menu-icon-chip {
  width: 26px;
  height: 26px;
  background: transparent;
}

/* Separador entre operacao e cadastros */
.menu-wrapper .sidebar .nav .menu-divisor {
  list-style: none;
  height: 1px;
  margin: var(--esp-3) var(--esp-4);
  background: var(--cor-borda);
}

/* ---------- Menu lateral: logo fixo, itens rolam, rodape ancorado ----------
   O custom-cli.css declara .sidebar-footer { min-height: 100vh } e um
   margin-bottom de 60px no .nav-footer. Como o rodape vem DEPOIS do menu no
   fluxo, "Suporte" e "Sair" caiam fora da area visivel do offcanvas. */
/* O Offcanvas do Bootstrap ja e flex-column, entao o wrapper precisa crescer
   como flex item — height:100% sozinho nao basta em todos os navegadores. */
.menu-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 5px;
}

.menu-wrapper .menu-logo {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--cor-borda);
  margin: 0;
}

.menu-wrapper .sidebar {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-top: var(--esp-2);
}

.menu-wrapper .sidebar-footer {
  flex: 0 0 auto;
  min-height: auto;
  margin-top: auto;
  background: var(--cor-menu-rodape-fundo);
  border-top: 1px solid var(--cor-borda);
}

.menu-wrapper .sidebar-footer .nav-footer {
  margin-bottom: 0;
  padding: var(--esp-2) 0;
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer {
  color: var(--cor-menu-rodape-letra);
  padding: 0.6rem var(--esp-3);
  gap: var(--esp-3);
  border-radius: var(--raio-md);
  margin: 2px var(--esp-2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer:hover {
  background-color: var(--cor-superficie);
  color: var(--primaria-800);
  box-shadow: var(--sombra-sm);
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer:hover .menu-icon {
  color: var(--primaria-700);
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer.menu-sair:hover {
  background-color: var(--cor-erro-fundo);
  color: var(--cor-erro);
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer.menu-sair:hover .menu-icon {
  color: var(--cor-erro);
}

.menu-wrapper .sidebar-footer .nav-footer .nav-item-footer .nav-link-footer .menu-title-footer {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
}

.menu-wrapper .sidebar-footer .menu-icon { color: var(--cor-menu-icone); }

/* ---------- Offcanvas ---------- */
.offcanvas { border: none; box-shadow: var(--sombra-lg); }
.offcanvas-header { border-bottom: 1px solid var(--cor-borda); }

/* ---------- Cabecalho de pagina (usado nas Home pages) ---------- */
.row_between_line {
  gap: var(--esp-3);
}

/* ---------- Icones ---------- */
.click, .click-icon { cursor: pointer; }

.click-icon {
  border-radius: var(--raio-md);
  transition: background-color .15s ease;
}

.click-icon:hover { background-color: var(--neutro-100); }

/* ---------- Tooltip ---------- */
.tooltip-inner {
  font-size: var(--texto-xs);
  background-color: var(--neutro-800);
  border-radius: var(--raio-sm);
  padding: var(--esp-1) var(--esp-2);
}

/* Tooltip sem conteudo (varias telas nao definem tooltipKey) fica invisivel
   em vez de aparecer como uma caixinha preta vazia. */
.tooltip-inner:empty { display: none; }

/* ==========================================================================
   Layout interno das paginas
   ========================================================================== */

/* ---------- Cards: faixa de destaque no topo ----------
   So nos cards da area de conteudo (login e menus ficam de fora).
   Card dentro de card volta a borda neutra para nao listrar a tela. */
.content-wrapper .card {
  border-top: 3px solid var(--cor-acao);
  border-radius: var(--raio-lg);
}

.content-wrapper .card .card {
  border-top: 1px solid var(--cor-borda);
}


/* ---------- Fundo e densidade ----------
   style.css pinta o fundo de #DCDCDC (cinza pesado, cards "afundam").
   Cards com respiro menor: o sistema e denso, a tela precisa render. */
.container-scroller { background: var(--neutro-100); }

.content-wrapper { padding: var(--esp-4) var(--esp-2); }

.content-wrapper .card .card-body { padding: var(--esp-4); }

/* ---------- Cabecalho de pagina (AstroNetPageHeader) ----------
   Uma linha: titulo + etiquetas + acoes. Metadados opcionais logo abaixo.
   Alinhado a borda dos cards e com altura minima, para sobrar tela. */
.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin: 0 0 var(--esp-3);
  padding: 0 var(--esp-1);
}

.page-header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  min-height: 40px;
}

.page-header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

h1.page-header-title {
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--primaria-950);
}

.page-header-subtitle {
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  padding-left: var(--esp-2);
  margin-left: var(--esp-1);
  border-left: 1px solid var(--cor-borda-forte);
  line-height: 1.2;
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

/* Botoes do cabecalho: mesma altura (32px), sem o padding/margem inline
   das telas antigas. */
.page-header-actions .click-icon,
.page-header-actions .click-icon-action,
.page-header-actions .click-icon-secondary,
.page-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 32px;
  padding: 0 var(--esp-3) !important;
  margin: 0 !important;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  border-radius: var(--raio-md);
  outline: none;
}

.page-header-actions .click-icon { background-color: var(--cor-superficie); }
.page-header-actions .click-icon:hover { background-color: var(--neutro-50); }
.page-header-actions .click-icon span,
.page-header-actions .click-icon-action span { margin: 0; }
.page-header-actions svg { width: 16px; height: 16px; }

/* Linha de metadados: icone + valor, separados por ponto */
.page-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-4);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.page-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.page-meta-item svg { flex: 0 0 auto; color: var(--neutro-400); }
.page-meta-item strong { font-weight: var(--peso-semi); color: var(--cor-texto); }

/* Etiqueta ao lado do titulo (codigo, status) */
.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--esp-2);
  border-radius: var(--raio-sm);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  background-color: var(--primaria-100);
  color: var(--primaria-800);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.page-badge-alerta { background-color: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.page-badge-neutro { background-color: var(--neutro-200); color: var(--neutro-600); }
.page-badge-acao { background-color: var(--cor-acao-fundo); color: var(--cor-acao-hover); }

@media (max-width: 768px) {
  .page-header-subtitle { border-left: 0; padding-left: 0; margin-left: 0; flex-basis: 100%; }
}

/* ---------- Botao expandir/recolher das tabelas (react-data-table) ----------
   O padrao pinta um quadrado cinza no hover/foco e ele fica "preso" depois do
   clique. Sem fundo: so o chevron muda de cor. */
button[data-testid^="expander-button"] {
  background-color: transparent !important;
  border-radius: var(--raio-sm);
  color: var(--primaria-700);
}

button[data-testid^="expander-button"]:hover,
button[data-testid^="expander-button"]:focus {
  background-color: transparent !important;
  color: var(--cor-acao);
}

button[data-testid^="expander-button"]:focus-visible {
  outline: 2px solid var(--primaria-300);
  outline-offset: 1px;
}

/* ---------- Submenu de linha (AstroGridSubMenu) ----------
   style.css legado forca .dropdown-menu.show { width:100%; margin... } e
   .dropdown-menu-popup { margin-left:15px }: aqui o menu volta a ter largura
   do conteudo, sombra e itens com icone. */
.astro-grid-submenu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-sm);
  background-color: transparent !important;
  color: var(--neutro-500);
  transition: background-color .15s ease, color .15s ease;
}

.astro-grid-submenu:hover,
.astro-grid-submenu[aria-expanded="true"] {
  background-color: var(--neutro-100) !important;
  color: var(--primaria-800);
}

.astro-grid-submenu:focus-visible {
  outline: 2px solid var(--primaria-300);
  outline-offset: 1px;
}

.dropdown-menu.dropdown-menu-popup,
.dropdown-menu.dropdown-menu-popup.show {
  width: auto !important;
  min-width: 176px;
  margin: var(--esp-1) 0 0 0 !important;
  padding: var(--esp-1) !important;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-lg);
  font-size: var(--texto-sm);
}

.dropdown-menu-popup .submenu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  height: 32px;
  padding: 0 var(--esp-2);
  border-radius: var(--raio-sm);
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.dropdown-menu-popup .submenu-item svg { flex: 0 0 auto; color: var(--neutro-400); }
.dropdown-menu-popup .submenu-item-noicon { display: inline-block; width: 15px; }

.dropdown-menu-popup .submenu-item:hover,
.dropdown-menu-popup .submenu-item:focus {
  background-color: var(--primaria-50);
  color: var(--primaria-900);
}

.dropdown-menu-popup .submenu-item:hover svg,
.dropdown-menu-popup .submenu-item:focus svg { color: var(--primaria-700); }

.dropdown-menu-popup .submenu-item.is-danger,
.dropdown-menu-popup .submenu-item.is-danger svg { color: var(--cor-erro); }

.dropdown-menu-popup .submenu-item.is-danger:hover,
.dropdown-menu-popup .submenu-item.is-danger:focus { background-color: var(--cor-erro-fundo); color: var(--cor-erro); }

.dropdown-menu-popup .submenu-item.is-disabled {
  color: var(--cor-texto-fraco);
  font-style: italic;
  background: transparent;
}

.dropdown-menu-popup .dropdown-divider {
  margin: var(--esp-1) 0;
  border-top-color: var(--cor-borda);
}

/* ==========================================================================
   Faixa de contexto da cotacao (AstroNetQuotationContext)
   ========================================================================== */
/* ---------- Anexos na linha de metadados (icone padrao tem 40px) ---------- */
.page-meta-upload .icon-upload {
  display: inline-flex;
  padding: 2px;
  margin: 0;
  background: transparent;
  color: var(--primaria-500);
}

.page-meta-upload .icon-upload svg { width: 18px; height: 18px; }

/* ---------- Contexto da cotacao (dentro do card, abaixo do titulo) ---------- */
.qmap-context {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
}

.qmap-context-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.qmap-context-desc {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  padding-left: var(--esp-2);
  border-left: 1px solid var(--cor-borda-forte);
}


/* ==========================================================================
   Secoes dentro de um card (ex.: Oferta: Condicoes comerciais / Itens)
   Titulo leve + dica; sem barra colorida. Erro deixa o titulo vermelho.
   ========================================================================== */
.page-section { scroll-margin-top: var(--esp-4); }

.page-section + .page-section {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.page-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-1) var(--esp-3);
  margin-bottom: var(--esp-3);
}

h2.page-section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--primaria-950);
}

.page-section-hint {
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
}

.page-section-head.has-error h2.page-section-title,
.page-section-head.has-error .page-section-hint { color: var(--cor-erro); }

.page-section-head.has-error .page-section-hint { font-weight: var(--peso-medio); }

/* Formulario de condicoes da oferta: campos com largura do conteudo
   (nao esticam pela tela), 32px de altura, observacao ocupa o resto da linha. */
.offer-conditions-grid {
  display: grid;
  grid-template-columns:
    minmax(180px, 240px)   /* condicao de pagamento */
    minmax(110px, 140px)   /* prazo (dias) */
    minmax(130px, 170px)   /* faturamento minimo */
    minmax(150px, 200px)   /* tipo de frete */
    minmax(220px, 1fr);    /* observacao */
  gap: var(--esp-3) var(--esp-3);
  align-items: start;
}

.offer-conditions label {
  margin-bottom: 2px;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
  white-space: nowrap;
}

.offer-conditions .form-control,
.offer-conditions .form-select,
.offer-conditions select,
.offer-conditions input {
  height: 32px;
  min-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: var(--texto-sm);
}

.offer-conditions textarea.form-control,
.offer-conditions textarea {
  height: 32px;
  min-height: 32px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.35;
  resize: vertical;
}

.offer-conditions .invalid-feedback { font-size: var(--texto-xs); margin-top: 2px; }

@media (max-width: 1200px) {
  .offer-conditions-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .offer-conditions-grid .offer-field-obs { grid-column: 1 / -1; }
}

/* ==========================================================================
   Seletor de empresa do topo (layout/CompanySwitcher.jsx)
   ========================================================================== */
.company-switcher-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 36px;
  max-width: 340px;
  padding: 0 var(--esp-3);
  margin: 0 var(--esp-2);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--raio-md);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--cor-topo-letra);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.company-switcher-toggle:hover,
.company-switcher-toggle[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.company-switcher-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

.company-switcher-toggle.is-static { cursor: default; background: transparent; border-color: transparent; }

.company-switcher-toggle svg { flex: 0 0 auto; opacity: .9; }

.company-switcher-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-switcher-chevron { transition: transform .2s ease; }
.company-switcher-toggle[aria-expanded="true"] .company-switcher-chevron { transform: rotate(180deg); }

/* O style.css legado forca .dropdown-menu.show { width:100% } — aqui largura fixa. */
.dropdown-menu.company-switcher-menu,
.dropdown-menu.company-switcher-menu.show {
  width: 320px !important;
  max-width: calc(100vw - 24px);
  margin-top: var(--esp-2) !important;
  padding: var(--esp-1) !important;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-modal);
  overflow: hidden;
}

.company-switcher-head {
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

.company-switcher-search {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-1) var(--esp-1) var(--esp-2);
  padding: 0 var(--esp-2);
  height: 32px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  color: var(--cor-texto-fraco);
}

.company-switcher-search:focus-within { border-color: var(--primaria-500); box-shadow: 0 0 0 3px var(--primaria-100); }

.company-switcher-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--texto-sm);
  color: var(--cor-texto);
}

.company-switcher-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.company-switcher-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-2);
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.company-switcher-item:hover,
.company-switcher-item:focus-visible { background-color: var(--primaria-50); outline: none; }

.company-switcher-item.is-active { background-color: var(--cor-acao-fundo); cursor: default; }

.company-switcher-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  background-color: var(--primaria-100);
  color: var(--primaria-800);
}

.company-switcher-avatar.is-supplier { background-color: var(--cor-info-fundo); color: var(--cor-info); }

.company-switcher-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.company-switcher-item-name {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-switcher-item-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
}

.company-switcher-check { flex: 0 0 auto; color: var(--cor-acao); }

.company-switcher-empty {
  padding: var(--esp-4) var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  text-align: center;
}

@media (max-width: 768px) {
  .company-switcher-toggle { max-width: 180px; }
}

/* ==========================================================================
   Menus do topo: idioma e usuario (layout/TopBarMenus.jsx)
   Mesmo visual do seletor de empresa.
   ========================================================================== */
.topbar-icon-btn,
.topbar-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  margin: 0 var(--esp-1);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-topo-letra);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.topbar-icon-btn:hover,
.topbar-icon-btn[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.topbar-avatar-btn { border-radius: var(--raio-full); min-width: 0; }

.topbar-icon-btn:focus-visible,
.topbar-avatar-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

.topbar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--raio-full);
  background-color: var(--cor-acao);
  color: var(--cor-acao-letra);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
  transition: box-shadow .15s ease;
}

.topbar-avatar-btn:hover .topbar-avatar,
.topbar-avatar-btn[aria-expanded="true"] .topbar-avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4); }

.topbar-avatar-lg { width: 40px; height: 40px; font-size: var(--texto-sm); box-shadow: none; }

/* style.css legado forca .dropdown-menu.show { width:100% } */
.dropdown-menu.topbar-menu,
.dropdown-menu.topbar-menu.show {
  width: 280px !important;
  max-width: calc(100vw - 24px);
  margin-top: var(--esp-2) !important;
  padding: var(--esp-1) !important;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-modal);
}

.dropdown-menu.topbar-menu.topbar-menu-sm,
.dropdown-menu.topbar-menu.topbar-menu-sm.show { width: 220px !important; }

.topbar-menu-head {
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

.topbar-menu-item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  height: 36px;
  padding: 0 var(--esp-2);
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  cursor: pointer;
}

.topbar-menu-item svg { flex: 0 0 auto; color: var(--neutro-400); }
.topbar-menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar-menu-item:hover,
.topbar-menu-item:focus-visible { background-color: var(--primaria-50); color: var(--primaria-900); outline: none; }
.topbar-menu-item:hover svg { color: var(--primaria-700); }

.topbar-menu-item.is-active { background-color: var(--cor-acao-fundo); cursor: default; }
.topbar-menu-item.is-active .topbar-lang-code { background-color: var(--cor-acao); color: var(--cor-acao-letra); }
.topbar-menu-check { color: var(--cor-acao) !important; }

.topbar-menu-item.is-danger,
.topbar-menu-item.is-danger svg { color: var(--cor-erro); }
.topbar-menu-item.is-danger:hover { background-color: var(--cor-erro-fundo); color: var(--cor-erro); }

.topbar-lang-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  border-radius: var(--raio-sm);
  background-color: var(--neutro-100);
  color: var(--neutro-600);
  font-size: 0.6875rem;
  font-weight: var(--peso-forte);
  letter-spacing: 0.04em;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-2) var(--esp-3);
}

.topbar-user-text { display: flex; flex-direction: column; min-width: 0; }

.topbar-user-name {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-user-email {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-divider {
  height: 1px;
  margin: 0 var(--esp-1) var(--esp-1);
  background-color: var(--cor-borda);
}

/* ==========================================================================
   Painel lateral (Offcanvas) — vale para todos os paineis do sistema
   ========================================================================== */

/* Fundo escurecido com leve desfoque, em vez do cinza chapado */
.offcanvas-backdrop.show {
  opacity: 1;
  background-color: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
}

.offcanvas.offcanvas-end {
  max-width: 100vw;
  border-left: 1px solid var(--cor-borda);
  box-shadow: -16px 0 40px -12px rgba(15, 23, 42, 0.22);
}

/* Faixa verde no topo, como nos cards */
.offcanvas.offcanvas-end::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-color: var(--cor-acao);
  z-index: 3;
}

.offcanvas.offcanvas-end .offcanvas-header {
  min-height: 60px;
  padding: var(--esp-3) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
}

/* Titulo: o OffcanvasHeader embrulha em h5; algumas telas passam h2 dentro */
.offcanvas.offcanvas-end .offcanvas-title,
.offcanvas.offcanvas-end .offcanvas-title h1,
.offcanvas.offcanvas-end .offcanvas-title h2,
.offcanvas.offcanvas-end .offcanvas-title h3 {
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  color: var(--primaria-950);
  letter-spacing: -0.01em;
  margin: 0;
}

.offcanvas.offcanvas-end .offcanvas-header .btn-close {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 calc(-1 * var(--esp-2)) 0 auto;
  border-radius: var(--raio-md);
  background-size: 12px;
  opacity: .55;
  transition: background-color .15s ease, opacity .15s ease;
}

.offcanvas.offcanvas-end .offcanvas-header .btn-close:hover { opacity: 1; background-color: var(--neutro-100); }

.offcanvas.offcanvas-end .offcanvas-body {
  padding: var(--esp-5) var(--esp-5) var(--esp-5);
}

/* Rotulos e campos mais discretos e alinhados com o resto do sistema */
.offcanvas.offcanvas-end .offcanvas-body label,
.offcanvas.offcanvas-end .offcanvas-body .form-label {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
}

.offcanvas.offcanvas-end .offcanvas-body .form-control,
.offcanvas.offcanvas-end .offcanvas-body .form-select { font-size: var(--texto-base); }

/* Rodape de acoes: a Row "text-center" com os botoes vira uma barra fixa no
   pe do painel, botoes alinhados a direita (Cancelar | Salvar). */
.offcanvas.offcanvas-end .offcanvas-body .row.text-center:has(.btn) {
  position: sticky;
  bottom: calc(-1 * var(--esp-5));
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--esp-2);
  margin: var(--esp-5) calc(-1 * var(--esp-5)) calc(-1 * var(--esp-5)) !important;
  padding: var(--esp-3) var(--esp-5);
  background-color: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, 0.12);
}

.offcanvas.offcanvas-end .offcanvas-body .row.text-center:has(.btn) > * {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  white-space: nowrap; /* o   depois do botao nao quebra linha */
}

.offcanvas.offcanvas-end .offcanvas-body .row.text-center:has(.btn) .btn {
  min-width: 104px;
  height: 36px;
  justify-content: center;
}

/* ---------- Botao secundario ----------
   btn.css legado forca cinza #dbdbdb + borda preta com !important. */
.btn.btn-secondary,
.btn.btn-secondary:visited {
  background-color: var(--cor-superficie) !important;
  border-color: var(--cor-borda-forte) !important;
  color: var(--cor-texto) !important;
}

.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:focus {
  background-color: var(--neutro-100) !important;
  border-color: var(--neutro-400) !important;
  color: var(--cor-texto) !important;
}

.btn.btn-secondary:focus-visible { box-shadow: 0 0 0 3px var(--primaria-100) !important; }

/* ==========================================================================
   Shell: topo fixo de 56px + menu lateral fixo recolhivel
   (layout/System.jsx, TopBar.jsx, Sidebar.jsx)
   ========================================================================== */
:root {
  --topo-altura: 56px;
  --menu-largura: 232px;
  --menu-largura-recolhido: 64px;
}

/* O topo vinha com position:unset inline; aqui ele gruda no alto. */
.app-shell > .navbar {
  position: sticky !important;
  top: 0;
  z-index: 1030;
  height: var(--topo-altura);
  min-height: var(--topo-altura);
  padding: 0;
}

.app-shell > .navbar .navbar-menu-wrapper {
  width: 100%;
  height: var(--topo-altura);
  padding: 0 var(--esp-4) 0 var(--esp-3);
}

.topbar-brand-area { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.topbar-menu-btn { margin: 0; }

.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--cor-topo-letra);
  text-decoration: none;
}

.topbar-brand:hover { color: #FFFFFF; }
.topbar-brand-logo { height: 28px; width: auto; }

.topbar-brand-name {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Perfil da empresa ativa dentro do seletor */
.company-switcher-profile {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--raio-sm);
  background-color: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.company-switcher-profile.is-supplier { background-color: rgba(56, 189, 248, 0.28); }

/* Corpo: menu + conteudo lado a lado */
.app-body {
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - var(--topo-altura));
  padding: 0;
}

.app-body > .main-panel { flex: 1 1 auto; min-width: 0; width: auto; }
.app-body .content-wrapper { padding: var(--esp-4) var(--esp-3); }

/* ---------- Menu lateral ---------- */
.app-sidebar {
  position: sticky;
  top: var(--topo-altura);
  flex: 0 0 var(--menu-largura);
  width: var(--menu-largura);
  height: calc(100vh - var(--topo-altura));
  display: flex;
  flex-direction: column;
  background-color: var(--cor-superficie);
  border-right: 1px solid var(--cor-borda);
  overflow: hidden;
  transition: width .2s ease, flex-basis .2s ease;
}

.app-sidebar.is-collapsed {
  flex-basis: var(--menu-largura-recolhido);
  width: var(--menu-largura-recolhido);
}

.app-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--esp-4) var(--esp-3);
}

.app-nav-group + .app-nav-group { margin-top: var(--esp-5); }

.app-nav-section {
  height: 20px;
  padding: 0 10px;
  margin-bottom: var(--esp-1);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
  overflow: hidden;
}

/* Recolhido: o titulo da secao vira um traco curto, o espaco se mantem */
.app-sidebar.is-collapsed .app-nav-section {
  font-size: 0;
  position: relative;
}

.app-sidebar.is-collapsed .app-nav-section::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1px;
  transform: translateX(-50%);
  background-color: var(--cor-borda-forte);
}

.app-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--neutro-600);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}

.app-nav-link svg { flex: 0 0 auto; color: var(--neutro-400); transition: color .15s ease; }

.app-nav-link:hover { background-color: var(--neutro-100); color: var(--primaria-900); }
.app-nav-link:hover svg { color: var(--primaria-700); }

.app-nav-link:focus-visible { outline: 2px solid var(--primaria-300); outline-offset: -2px; }

/* Ativo: fundo claro + texto forte + filete verde colado a esquerda */
.app-nav-link.is-active {
  background-color: var(--primaria-50);
  color: var(--primaria-900);
  font-weight: var(--peso-semi);
}

.app-nav-link.is-active svg { color: var(--cor-acao); }

.app-nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--cor-acao);
}

.app-nav-label { overflow: hidden; text-overflow: ellipsis; }

.app-sidebar.is-collapsed .app-nav-link { justify-content: center; padding: 0; gap: 0; }
.app-sidebar.is-collapsed .app-nav-label { display: none; }

.app-sidebar-footer {
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
  border-top: 1px solid var(--cor-borda);
}

.app-nav-collapse { color: var(--cor-texto-suave); }

/* ---------- Celular/tablet: o mesmo menu dentro do Offcanvas ---------- */
.app-sidebar-offcanvas.offcanvas { width: 264px !important; }

.app-sidebar-offcanvas .app-sidebar {
  position: static;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-right: 0;
}

@media (max-width: 575.98px) {
  .topbar-brand-name { display: none; }
  .company-switcher-profile { display: none; }
}

/* ==========================================================================
   Ordem de Compra — documento (components/framework/AstroNetPurchaseOrder.jsx)
   Comprador e fornecedor. Folha centralizada na tela; na impressao ocupa a
   largura util da A4. Larguras sempre relativas: cabe em qualquer largura.
   ========================================================================== */
.po-page { padding-bottom: var(--esp-6); }

.po-loading {
  padding: var(--esp-6);
  text-align: center;
  color: var(--cor-texto-suave);
}

.po-doc {
  max-width: 920px;
  margin: 0 auto;
  padding: var(--esp-6);
  background-color: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-top: 3px solid var(--cor-acao);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  line-height: 1.45;
}

.po-doc h3 { margin: 0; }

.po-label {
  display: block;
  margin-bottom: var(--esp-1);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

.po-muted { color: var(--cor-texto-suave); }
.po-strong { font-weight: var(--peso-semi); }

/* Cabecalho */
.po-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: 2px solid var(--primaria-900);
}

.po-kicker {
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cor-acao);
}

.po-code {
  font-size: 1.5rem;
  font-weight: var(--peso-forte);
  color: var(--primaria-950);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.po-refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-4);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.po-head-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.po-head-total-value {
  font-size: 1.375rem;
  font-weight: var(--peso-forte);
  color: var(--primaria-950);
  font-variant-numeric: tabular-nums;
}

/* Blocos em 2 colunas (1 no celular) */
.po-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.po-party-name {
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
  color: var(--primaria-950);
  overflow-wrap: anywhere;
}

.po-party-line { overflow-wrap: anywhere; }

.po-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
  align-content: start;
}

.po-fact .po-label { margin-bottom: 0; }
.po-fact-value { font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }

/* Itens */
.po-items { padding-top: var(--esp-4); }

.po-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.po-col-n { width: 5%; }
.po-col-qty { width: 10%; }
.po-col-money { width: 16%; }

.po-table th {
  padding: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda-forte);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  text-align: left;
}

.po-table td {
  padding: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.po-table .po-num { text-align: right; white-space: nowrap; }

.po-item-desc { font-weight: var(--peso-semi); }
.po-item-meta { font-size: var(--texto-xs); color: var(--cor-texto-suave); }

.po-table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--primaria-900);
  font-size: var(--texto-base);
  font-weight: var(--peso-forte);
  color: var(--primaria-950);
}

.po-empty { text-align: center; color: var(--cor-texto-fraco); padding: var(--esp-5) !important; }

.po-obs { padding-top: var(--esp-4); }
.po-obs p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.po-foot {
  margin-top: var(--esp-5);
  padding-top: var(--esp-2);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--texto-xs);
  text-align: right;
}

@media (max-width: 720px) {
  .po-doc { padding: var(--esp-4); }
  .po-grid { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
  .po-head-total { align-items: flex-start; text-align: left; }
  .po-col-n { width: 0; }
  .po-table th:first-child, .po-table td:first-child { display: none; }
  .po-col-money { width: 24%; }
  .po-col-qty { width: 14%; }
}

/* ---------- Impressao ----------
   O style.css ja esconde tudo que nao e .order-print. Aqui a folha vira
   o papel: A4, margem de 12mm, sem moldura. */
@media print {
  @page { size: A4; margin: 12mm; }

  .po-doc {
    max-width: none;
    width: 100% !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Na impressao mantem 2 colunas mesmo que a janela esteja estreita */
  .po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .po-table th:first-child, .po-table td:first-child { display: table-cell !important; }
  .po-col-n { width: 5% !important; }
  .po-col-qty { width: 10% !important; }
  .po-col-money { width: 16% !important; }

  .po-table thead { display: table-header-group; }
  .po-table tr, .po-party, .po-fact { break-inside: avoid; }
  .po-head, .po-grid { break-inside: avoid; }
}

/* Tabela da OC: o style.css legado pinta th/td (fundo azul e bordas verticais) */
.po-doc .po-table th,
.po-doc .po-table td {
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0;
}

.po-doc .po-table tfoot td { border-top: 2px solid var(--primaria-900) !important; }

@media print {
  /* O fundo cinza do body nao entra no papel */
  html, body { background: #FFFFFF !important; }
}

/* .order-print no style.css legado impoe width:70% e min-height da tela:
   a folha passa a usar a largura disponivel (ate 920px) e a altura do conteudo. */
.po-doc.order-print { width: 100%; min-height: 0; }

.po-doc .po-table { border: 0 !important; }

/* ==========================================================================
   Requisicao — listagem, formulario e itens (pages/buyer/request)
   ========================================================================== */

/* ---------- Listagem ---------- */
.req-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}

.req-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: var(--raio-md);
  background-color: var(--neutro-100);
}

.req-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  white-space: nowrap;
}

.req-tab:hover { color: var(--primaria-900); }

.req-tab.is-active {
  background-color: var(--cor-superficie);
  color: var(--primaria-900);
  font-weight: var(--peso-semi);
  box-shadow: var(--sombra-sm);
}

.req-tab-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--raio-full);
  background-color: var(--neutro-200);
  color: var(--neutro-600);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.req-tab.is-active .req-tab-count { background-color: var(--primaria-100); color: var(--primaria-800); }

.req-search {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  flex: 0 1 320px;
  height: 34px;
  margin: 0;
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  color: var(--cor-texto-fraco);
}

.req-search:focus-within { border-color: var(--primaria-500); box-shadow: 0 0 0 3px var(--primaria-100); }

.req-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: var(--texto-sm);
  color: var(--cor-texto);
}

.req-cell-stack { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 0; }

.req-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--peso-semi);
  color: var(--primaria-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.req-urgent {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-full);
  background-color: var(--cor-erro);
  box-shadow: 0 0 0 3px var(--cor-erro-fundo);
}

.req-desc {
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-text { color: var(--cor-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.req-muted {
  font-size: var(--texto-xs);
  color: var(--cor-texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.req-num { font-variant-numeric: tabular-nums; }

/* Etiqueta de status */
.req-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 var(--esp-2);
  border-radius: var(--raio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
}

.req-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.req-status.is-rascunho  { background-color: var(--neutro-100);       color: var(--neutro-600); }
.req-status.is-andamento { background-color: var(--cor-info-fundo);   color: var(--cor-info); }
.req-status.is-alerta    { background-color: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.req-status.is-concluido { background-color: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.req-status.is-cancelado { background-color: var(--cor-erro-fundo);   color: var(--cor-erro); }

/* Progresso dos itens */
.req-progress { display: flex; flex-direction: column; gap: 4px; width: 100%; }

.req-progress-bar {
  height: 6px;
  border-radius: var(--raio-full);
  background-color: var(--neutro-200);
  overflow: hidden;
}

.req-progress-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--cor-acao);
}

.req-progress-text { font-size: var(--texto-xs); color: var(--cor-texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.req-progress-text strong { color: var(--cor-texto); font-weight: var(--peso-semi); }

/* Termometro do prazo (lista de cotacoes do fornecedor): cor pelo tempo restante */
.req-progress-bar.is-ok > span      { background-color: var(--cor-sucesso); }
.req-progress-bar.is-atencao > span { background-color: var(--cor-alerta); }
.req-progress-bar.is-critico > span { background-color: var(--cor-erro); }
.req-deadline.is-atencao { color: var(--cor-alerta); font-weight: var(--peso-semi); }
.req-deadline.is-critico { color: var(--cor-erro); font-weight: var(--peso-semi); }

/* Etiquetas da lista de cotacoes do fornecedor: itens para ofertar / tudo ofertado / grande oportunidade */
.sup-desc-line { display: flex; align-items: center; gap: var(--esp-2); min-width: 0; }
.sup-desc-line .req-desc { min-width: 0; }

.sup-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 var(--esp-2);
  border: 1px solid transparent;
  border-radius: var(--raio-full);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.sup-tag.is-todo { background-color: var(--cor-info-fundo); color: var(--cor-info); border-color: currentColor; }
.sup-tag.is-done { background-color: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.sup-tag.is-opportunity {
  background: linear-gradient(135deg, #fff4c2 0%, #ffd966 100%);
  border-color: #e0b100;
  color: #7a5600;
  box-shadow: 0 1px 4px rgba(224, 177, 0, .35);
}

.req-empty { padding: var(--esp-6) var(--esp-4); color: var(--cor-texto-fraco); }

/* ---------- Formulario ---------- */
.req-form .page-section + .page-section { margin-top: var(--esp-4); padding-top: var(--esp-4); }

.req-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
  align-items: start;
}

.req-span-2 { grid-column: span 2; }
.req-span-3 { grid-column: span 3; }
.req-span-4 { grid-column: 1 / -1; }

.req-field { margin-bottom: 0; }

.req-form label,
.req-item-form label {
  margin-bottom: 4px;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-suave);
}

.req-form .form-control,
.req-form .form-select,
.req-item-form .form-control,
.req-item-form .form-select { min-height: 38px; font-size: var(--texto-base); }

.req-form textarea.form-control,
.req-item-form textarea.form-control { height: auto !important; min-height: 76px; resize: vertical; }

.req-switch { display: flex; align-items: center; gap: var(--esp-2); min-height: 38px; margin: 0; }
.req-switch .form-check-input { margin-top: 0; }

/* Botao secundario com icone (adicionar data / adicionar item) */
.btn.req-btn-add {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 38px;
  padding: 0 var(--esp-3);
  white-space: nowrap;
  font-weight: var(--peso-medio);
}

.btn.req-btn-add:disabled { opacity: .55; }

.req-schedule-add {
  display: flex;
  gap: var(--esp-2);
  max-width: 380px;
}

.req-schedule-add .form-control { flex: 1; min-width: 0; }

.req-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  min-height: 28px;
}

.req-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 var(--esp-3);
  border: 1px solid var(--primaria-200);
  border-radius: var(--raio-full);
  background-color: var(--primaria-50);
  color: var(--primaria-900);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  font-variant-numeric: tabular-nums;
}

.req-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primaria-700);
  cursor: pointer;
}

.req-chip-remove:hover { background-color: var(--cor-erro-fundo); color: var(--cor-erro); }

.req-attach {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-1);
  min-height: 76px;
  padding: var(--esp-2) var(--esp-3);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background-color: var(--neutro-50);
}

.req-attach .icon-upload { margin: 0; padding: 2px; background: transparent; }
.req-attach .icon-upload svg { width: 26px; height: 26px; }

/* ---------- Itens ---------- */
.req-items { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda); }

.req-items-head { align-items: center; justify-content: space-between; }
.req-items-head .page-badge { margin-left: var(--esp-1); }

.req-items-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background-color: var(--neutro-50);
  text-align: center;
  color: var(--cor-texto);
}

.req-items-empty svg { color: var(--primaria-400); }
.req-items-empty .req-muted { white-space: normal; max-width: 420px; font-size: var(--texto-sm); }
.req-items-empty .req-btn-add { margin-top: var(--esp-2); }

/* ---------- Painel do item (Offcanvas) ---------- */
.req-item-form { display: flex; flex-direction: column; gap: var(--esp-4); }

.req-product {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--primaria-200);
  border-radius: var(--raio-md);
  background-color: var(--primaria-50);
}

.req-product-icon { flex: 0 0 auto; color: var(--primaria-600); }
.req-product-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.req-product-text strong { color: var(--primaria-950); overflow-wrap: anywhere; }
.req-product-text .req-muted { white-space: normal; }

.req-product-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-md);
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.req-product-clear:hover { background-color: var(--cor-superficie); color: var(--cor-erro); }

.req-sched {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
}

.req-sched-head,
.req-sched-row,
.req-sched-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: var(--esp-3);
  align-items: center;
  padding: var(--esp-2) var(--esp-3);
}

.req-sched-head {
  background-color: var(--neutro-50);
  border-bottom: 1px solid var(--cor-borda);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
}

.req-sched-row + .req-sched-row { border-top: 1px solid var(--cor-borda); }
.req-sched-row .form-control { min-height: 36px; }
.req-sched-row .req-num { text-align: right; }

.req-sched-total {
  border-top: 1px solid var(--cor-borda-forte);
  background-color: var(--neutro-50);
  font-size: var(--texto-sm);
}

.req-sched-total strong { text-align: right; padding-right: var(--esp-3); }

.req-item-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--esp-4);
  align-items: start;
}

@media (max-width: 991.98px) {
  .req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .req-span-3, .req-span-2 { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .req-grid { grid-template-columns: minmax(0, 1fr); }
  .req-item-notes { grid-template-columns: minmax(0, 1fr); }
  .req-search { flex-basis: 100%; }
}

/* Requisicao: controle a direita do titulo da secao (Urgente) */
.req-section-head-aside { align-items: center; }
.req-section-head-aside > :last-child { margin-left: auto; }

.req-urgent-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 32px;
  margin: 0;
  padding: 0 var(--esp-3) 0 calc(var(--esp-3) + 2.5em);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-full);
  background-color: var(--cor-superficie);
}

.req-urgent-toggle label { margin: 0 !important; color: var(--cor-texto) !important; font-weight: var(--peso-medio); cursor: pointer; }
.req-urgent-toggle.is-on { border-color: var(--cor-erro-borda); background-color: var(--cor-erro-fundo); }
.req-urgent-toggle.is-on label { color: var(--cor-erro) !important; }
.req-urgent-toggle .form-check-input:checked { background-color: var(--cor-erro); border-color: var(--cor-erro); }

/* Botao de acao (verde): btn.css legado forca .btn-primary com !important,
   entao .btn-acao precisa do mesmo peso para valer. */
.btn.btn-acao,
.btn.btn-acao:visited {
  background-color: var(--cor-acao) !important;
  border-color: var(--cor-acao) !important;
  color: var(--cor-acao-letra) !important;
}

.btn.btn-acao:hover,
.btn.btn-acao:active,
.btn.btn-acao:focus {
  background-color: var(--cor-acao-hover) !important;
  border-color: var(--cor-acao-hover) !important;
  color: var(--cor-acao-letra) !important;
}

/* ---------- Requisicao: ajustes v2 ---------- */

/* Anexo: conteudo centralizado na caixa */
.req-attach {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.req-attach .req-muted { white-space: normal; }

/* Etiquetas de data da programacao */
.req-chips { gap: var(--esp-2); margin-top: var(--esp-3); }

.req-chip {
  height: auto;
  min-height: 44px;
  gap: var(--esp-2);
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  box-shadow: var(--sombra-sm);
}

.req-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--raio-sm);
  background-color: var(--primaria-50);
  color: var(--primaria-700);
}

.req-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.req-chip-text strong { font-size: var(--texto-sm); font-weight: var(--peso-semi); color: var(--primaria-950); }
.req-chip-text span { font-size: 0.6875rem; color: var(--cor-texto-suave); text-transform: lowercase; }

.req-chip-remove { margin-left: var(--esp-1); color: var(--cor-texto-fraco); }

/* Cartao do produto no painel do item */
.req-product { padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-3); }

.req-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  color: var(--primaria-600);
}

.btn.req-product-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--esp-3);
  font-size: var(--texto-sm);
}

/* Busca da referencia do produto (manage/company/ReferencePicker.jsx) */
.ref-section-hint { margin: 0 0 var(--esp-2); }
.ref-picker { position: relative; }
.ref-picker .req-search.ref-picker-input { display: flex; width: 100%; height: 38px; }
.ref-hint { display: block; margin-top: var(--esp-1); font-size: var(--texto-xs); }
.ref-spin { flex: 0 0 auto; animation: ref-spin 0.9s linear infinite; }
@keyframes ref-spin { to { transform: rotate(360deg); } }

.ref-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  margin: 0;
  padding: var(--esp-1);
  list-style: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background-color: var(--cor-superficie);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.ref-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-sm, 6px);
  cursor: pointer;
}
.ref-option strong { font-size: var(--texto-sm); font-weight: 600; color: var(--cor-texto); overflow-wrap: anywhere; }
.ref-option .req-muted { font-size: var(--texto-xs); }
.ref-option.is-active { background-color: var(--primaria-50); }
.ref-option.is-active strong { color: var(--primaria-900); }

.ref-option-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--texto-xs);
  color: var(--primaria-700);
}
.ref-option-parent.is-missing,
.ref-parent.is-missing { color: var(--cor-alerta, #b45309); }

.ref-empty,
.ref-more { padding: var(--esp-2) var(--esp-3); font-size: var(--texto-sm); color: var(--cor-texto-fraco); }
.ref-more { border-top: 1px solid var(--cor-borda); font-size: var(--texto-xs); }

.ref-picked { display: flex; flex-direction: column; gap: var(--esp-2); }
.ref-parent {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-left: var(--esp-5);
  padding: var(--esp-2) var(--esp-3);
  border-left: 2px solid var(--primaria-200);
  color: var(--primaria-700);
  font-size: var(--texto-sm);
}
.ref-parent > svg { flex: 0 0 auto; margin-top: 2px; }
.ref-parent-label { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cor-texto-fraco); }

/* ==========================================================================
   Paineis de filtro (components/framework/AstroNetFilterParts.jsx)
   ========================================================================== */
.offcanvas.flt-offcanvas { width: 440px !important; max-width: 100vw; }

.flt-panel { display: flex; flex-direction: column; gap: var(--esp-5); }

.flt-section { display: flex; flex-direction: column; gap: var(--esp-2); }

h3.flt-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cor-texto-fraco);
}

.flt-chips { display: flex; flex-wrap: wrap; gap: var(--esp-2); }

.flt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-full);
  background-color: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.flt-chip:hover { border-color: var(--primaria-400); background-color: var(--primaria-50); }

.flt-chip.is-active {
  border-color: var(--cor-acao);
  background-color: var(--cor-acao-fundo);
  color: var(--cor-acao-hover);
  font-weight: var(--peso-semi);
}

.flt-chip:focus-visible { outline: 2px solid var(--primaria-300); outline-offset: 2px; }

.flt-period { display: flex; flex-direction: column; gap: var(--esp-3); }

.flt-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }

.flt-date { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.flt-date span { font-size: var(--texto-xs); color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
.flt-date .form-control { min-height: 38px; }

/* Contador de filtros ativos no botao "Filtrar" */
.flt-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--raio-full);
  background-color: var(--cor-acao);
  color: var(--cor-acao-letra);
  font-size: 0.6875rem;
  font-weight: var(--peso-forte);
}

/* ---------- Grade de cotacoes ---------- */
.qt-questions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--raio-full);
  background-color: var(--neutro-100);
  color: var(--neutro-600);
  font-size: 0.6875rem;
  font-weight: var(--peso-semi);
}

.qt-questions.is-pending { background-color: var(--cor-erro-fundo); color: var(--cor-erro); }

.qt-scope { display: inline-flex; align-items: center; gap: 4px; }
.qt-scope svg { flex: 0 0 auto; }

.req-muted.is-alerta { color: var(--cor-alerta); font-weight: var(--peso-semi); }

.req-search { flex-basis: 360px; }

/* style.css legado: .container-scroller { overflow: hidden } transforma o shell
   num container de rolagem e anula todo position: sticky (topo, menu, rodapes).
   "clip" corta o transbordo sem criar container de rolagem. */
.container-scroller.app-shell { overflow: clip; }

/* Interruptores (form-switch) ligados na cor de acao, nao no azul do Bootstrap */
.form-check-input:checked {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
}

.form-check-input:focus { border-color: var(--primaria-300); box-shadow: 0 0 0 3px var(--primaria-100); }

/* style.css legado deixa body com overflow-x:hidden/overflow-y:auto: o body vira um
   container de rolagem que nunca rola e mata todo position:sticky. "clip" corta o
   transbordo lateral sem esse efeito. (Modal aberto ainda trava via style inline.) */
body { overflow-x: clip; overflow-y: visible; }

/* ==========================================================================
   Minhas Empresas (pages/buyer/manage) — reaproveita req-* da Requisicao
   ========================================================================== */
.mng-tabs-bar { margin-bottom: var(--esp-3); overflow-x: auto; }
.mng-tabs { flex-wrap: nowrap; }
.mng-tabs .req-tab svg { flex: 0 0 auto; opacity: .75; }
.mng-tabs .req-tab.is-active svg { opacity: 1; color: var(--primaria-600); }

/* Rodape de acoes dos formularios da aba (Cancelar | Salvar) */
.mng-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-2);
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.mng-form-actions .btn { min-width: 104px; height: 38px; justify-content: center; }

/* Logo da empresa (Minha empresa > Empresa) */
.mng-logo { display: flex; align-items: center; gap: var(--esp-4); }
.mng-logo-preview {
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--esp-2);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto-fraco);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.mng-logo-preview.has-logo { border-style: solid; border-color: var(--cor-borda); }
.mng-logo-preview:hover:not(:disabled),
.mng-logo-preview.is-drag { border-color: var(--cor-acao); background: var(--cor-acao-fundo); }
.mng-logo-preview:focus-visible { outline: 2px solid var(--cor-acao); outline-offset: 2px; }
.mng-logo-preview:disabled { cursor: progress; }
.mng-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mng-logo-info { min-width: 0; }
.mng-logo-hint { margin: 0 0 var(--esp-2); color: var(--cor-texto); }
.mng-logo-hint span { color: var(--cor-texto-suave); font-size: .8125rem; }
.mng-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.mng-logo-actions .btn { display: inline-flex; align-items: center; gap: var(--esp-1); }
@media (max-width: 575.98px) {
  .mng-logo { flex-direction: column; align-items: flex-start; }
}

/* Botao principal da barra das listas (Novo) */
.req-toolbar .btn.req-btn-add { height: 34px; }

.mng-toolbar-actions { display: inline-flex; align-items: center; gap: var(--esp-2); margin-left: auto; }

/* Etiquetas pequenas dentro da grade (uso do endereco, tipo, etc.) */
.mng-tags { display: flex; flex-wrap: wrap; gap: 4px; }

@media (max-width: 575.98px) {
  .mng-toolbar-actions { width: 100%; }
  .mng-toolbar-actions .req-search { flex: 1 1 auto; }
}

/* ===== Oferta do fornecedor: gravação automática ===== */
.offer-autosave {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.offer-autosave.is-saving { color: var(--cor-texto-suave); }
.offer-autosave.is-saving svg { animation: offer-spin 1s linear infinite; }
.offer-autosave.is-saved  { color: var(--cor-sucesso); }
.offer-autosave.is-error  { color: var(--cor-erro); }
@keyframes offer-spin { to { transform: rotate(360deg); } }

/* Situação da linha */
.offer-save {
  display: inline-block;
  max-width: 100%;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offer-save.is-saved   { color: var(--cor-sucesso); }
.offer-save.is-saving  { color: var(--cor-texto-suave); }
.offer-save.is-missing { color: var(--cor-alerta); white-space: normal; }
.offer-save.is-error   { color: var(--cor-erro); white-space: normal; }
.offer-save.is-empty   { color: var(--cor-texto-suave); font-weight: normal; }

/* Autocomplete de NCM (lista em portal, fora da grade) */
.ncm-picker-list {
  position: fixed;
  z-index: 2000;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background-color: var(--cor-superficie, #fff);
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.ncm-picker-option {
  display: flex;
  gap: 8px;
  padding: 6px 12px;
  font-size: var(--texto-sm);
  cursor: pointer;
}
.ncm-picker-option strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ncm-picker-option span { color: var(--cor-texto-suave); }
.ncm-picker-option:hover,
.ncm-picker-option.is-active { background-color: var(--cor-info-fundo); }
.ncm-picker-empty { padding: 6px 12px; font-size: var(--texto-sm); color: var(--cor-texto-suave); }

/* Total da oferta: etiqueta verde no titulo da secao Itens */
.offer-total-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin-left: var(--esp-2);
  padding: 0 10px;
  border: 1px solid var(--cor-sucesso);
  border-radius: var(--raio-full);
  background-color: var(--cor-sucesso-fundo);
  color: var(--cor-sucesso);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: help;
}
.offer-total-chip strong {
  font-size: var(--texto-sm);
  font-weight: var(--peso-bold, 700);
  font-variant-numeric: tabular-nums;
}