/* Amarrações de fornecedores — a tela APROVADA (tela-amarracao-radar-preview.html, 09-09-2026).
   As regras abaixo são as da prévia. Os ajustes, todos declarados:
   1) tudo preso a #radar-binding-screen, e as regras gerais do Radar que vazavam para dentro
      (.warn, .btn, .muted, table/th/td, h2/h3, :focus-visible) são anuladas aqui mesmo;
   2) só as cores claras: o Radar é claro, e light-dark() escureceria esta tela sozinha;
   3) a barra verde de cima não entra, porque a navegação é a do Radar; no lugar do fundo da
      página, a tela é um bloco de cantos arredondados dentro do conteúdo;
   4) acréscimos que a prévia não tinha (Atualizar do Sankhya, a linha "selecionar todos" da busca,
      o aviso de edição e o "carregar mais") usam as mesmas peças: linha da árvore, selo e botão. */

#radar-binding-screen {
  --rb-fg: rgb(26 28 31);
  --rb-muted-fg: rgb(26 28 31 / 49.4%);
  --rb-input: rgb(26 28 31 / 11.8%);
  --rb-secondary: rgb(255 255 255 / 96%);
  --rb-ring: rgb(51 156 255);
  color-scheme: light;
  color: #172019;
  background: #f4f7f4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 430;
  line-height: 21px;
  padding: 18px;
  border-radius: 12px;
  min-height: 760px;
}
#radar-binding-screen *,
#radar-binding-screen *::before,
#radar-binding-screen *::after { box-sizing: border-box; }
#radar-binding-screen button,
#radar-binding-screen input,
#radar-binding-screen select { font: inherit; }

/* ── o que vinha das regras gerais do Radar e não pertence à prévia ─────────────────────────── */
#radar-binding-screen h2,
#radar-binding-screen h3,
#radar-binding-screen p { margin-block: 0; letter-spacing: normal; }
#radar-binding-screen .warn { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; }
#radar-binding-screen .muted { color: inherit; }
#radar-binding-screen table { width: 100%; border-collapse: collapse; border-spacing: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; }
#radar-binding-screen th,
#radar-binding-screen td { font-size: inherit; background: transparent; text-transform: none; letter-spacing: normal; }
#radar-binding-screen tr:hover td { background: transparent; }
#radar-binding-screen :focus-visible { outline-color: var(--rb-ring); }

/* ── as peças do sistema de desenho da prévia ────────────────────────────────────────────────── */
#radar-binding-screen h2 { font-size: 20px; font-weight: 500; line-height: 1.25; }
#radar-binding-screen h3 { font-size: 18px; font-weight: 500; line-height: 1.3; }
#radar-binding-screen b,
#radar-binding-screen strong,
#radar-binding-screen th { font-weight: 500; }
#radar-binding-screen .text-small { font-size: 12px; line-height: 16px; }
#radar-binding-screen .text-muted { color: var(--rb-muted-fg); }
#radar-binding-screen .tabular-nums { font-variant-numeric: tabular-nums; }
#radar-binding-screen .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#radar-binding-screen svg { display: block; max-width: 100%; height: auto; }
#radar-binding-screen svg.lucide { width: 16px; height: 16px; flex: none; margin: 0; stroke-width: 1.6; }

#radar-binding-screen .btn {
  appearance: button; display: inline-flex; inline-size: fit-content; max-inline-size: 100%;
  min-height: 28px; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0 8px;
  border: 1px solid var(--rb-input); border-radius: 10px; color: var(--rb-fg); background: var(--rb-secondary);
  cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; user-select: none;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; transition: none;
  -webkit-font-smoothing: antialiased;
}
#radar-binding-screen .btn:not(:disabled):hover { color: var(--rb-fg); border-color: var(--rb-input); background: color-mix(in srgb, var(--rb-fg) 6%, var(--rb-secondary)); }
#radar-binding-screen .btn-primary { border-color: transparent; color: #fff; background: var(--rb-fg); background-clip: padding-box; }
#radar-binding-screen .btn-primary:not(:disabled):hover { color: #fff; border-color: transparent; background: color-mix(in srgb, var(--rb-fg) 80%, transparent); background-clip: padding-box; }
#radar-binding-screen .btn-ghost { border-color: transparent; color: var(--rb-muted-fg); background: transparent; }
#radar-binding-screen .btn-ghost:not(:disabled):hover { color: var(--rb-fg); border-color: transparent; background: color-mix(in srgb, var(--rb-fg) 6%, var(--rb-secondary)); }
#radar-binding-screen .btn:disabled { cursor: not-allowed; opacity: .4; }
#radar-binding-screen .btn:focus-visible { outline: 2px solid var(--rb-ring); outline-offset: 2px; }

#radar-binding-screen .form-control {
  display: block; width: 100%; min-height: 28px; padding: 0 8px; outline: none;
  border: 1px solid var(--rb-input); border-radius: 10px; color: var(--rb-fg); background: var(--rb-secondary);
}
#radar-binding-screen .form-control::placeholder { color: var(--rb-muted-fg); }
#radar-binding-screen .form-select {
  appearance: none; display: block; width: 100%; min-height: 28px; margin: 0; padding: 0 32px 0 8px; outline: none;
  border: 1px solid var(--rb-input); border-radius: 10px; color: var(--rb-fg); background-color: var(--rb-secondary);
  background-image: linear-gradient(45deg, transparent 50%, var(--rb-muted-fg) 50%), linear-gradient(135deg, var(--rb-muted-fg) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-repeat: no-repeat; background-size: 4px 4px;
  cursor: default;
}
#radar-binding-screen .form-select:not(:disabled):hover { background-color: color-mix(in srgb, var(--rb-fg) 6%, var(--rb-secondary)); }
#radar-binding-screen .form-control:focus-visible,
#radar-binding-screen .form-select:focus-visible { border-color: var(--rb-ring); box-shadow: inset 0 0 0 1px var(--rb-ring); outline: none; }

/* ── a tela, regra a regra da prévia ─────────────────────────────────────────────────────────── */
#radar-binding-screen .radar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
#radar-binding-screen .radar-heading h2 { margin: 0 0 4px; font-weight: 500; }
#radar-binding-screen .radar-heading p { margin: 0; color: #5c6a60; }
#radar-binding-screen .radar-heading-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#radar-binding-screen .radar-preview-note { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; color: #704d00; background: #fff2c7; white-space: nowrap; }
#radar-binding-screen .radar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
#radar-binding-screen .radar-stat { padding: 11px 13px; border: 1px solid #d7dfd8; border-radius: 10px; background: #fff; }
#radar-binding-screen .radar-stat span { display: block; color: #647168; }
#radar-binding-screen .radar-stat strong { font-weight: 500; }
#radar-binding-screen .radar-stat.warn strong { color: #9a5900; }
#radar-binding-screen .radar-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #d7dfd8; }
#radar-binding-screen .radar-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 0; border-bottom: 2px solid transparent; color: #5d6a61; background: transparent; cursor: pointer; }
#radar-binding-screen .radar-tab.active { color: #174b2c; border-bottom-color: #2d8750; }
#radar-binding-screen .radar-workspace { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 14px; align-items: start; }
#radar-binding-screen .radar-pane { border: 1px solid #d7dfd8; border-radius: 12px; background: #fff; overflow: hidden; }
#radar-binding-screen .radar-pane-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #dfe5df; background: #fbfcfb; }
#radar-binding-screen .radar-pane-head .form-control { min-width: 150px; flex: 1; }
#radar-binding-screen .radar-kind-filter { max-width: 160px; }
#radar-binding-screen .radar-data-note { display: flex; align-items: center; gap: 7px; padding: 8px 12px; color: #66531d; background: #fff8df; border-bottom: 1px solid #ece1b8; }
#radar-binding-screen .radar-tree { padding: 6px 0 10px; }
#radar-binding-screen .radar-tree-row { display: grid; grid-template-columns: 28px 30px minmax(0, 1fr) auto; align-items: center; gap: 4px; min-height: 40px; padding: 4px 10px; border-bottom: 1px solid #edf0ed; }
#radar-binding-screen .radar-tree-row:hover { background: #f3f8f4; }
#radar-binding-screen .radar-tree-row.selected { background: #e8f4eb; }
#radar-binding-screen .radar-indent-1 { padding-left: 28px; }
#radar-binding-screen .radar-indent-2 { padding-left: 48px; }
#radar-binding-screen .radar-indent-3 { padding-left: 68px; }
#radar-binding-screen .radar-indent-4 { padding-left: 88px; }
#radar-binding-screen .radar-expand { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; color: #4c5a50; background: transparent; cursor: pointer; }
#radar-binding-screen .radar-check { width: 18px; height: 18px; margin: 0; accent-color: #2d8750; cursor: pointer; }
#radar-binding-screen .radar-node-main { min-width: 0; cursor: pointer; }
#radar-binding-screen .radar-node-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
#radar-binding-screen .radar-node-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#radar-binding-screen .radar-node-meta { color: #6b776e; }
#radar-binding-screen .radar-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; color: #315c3f; background: #e7f3e9; white-space: nowrap; }
#radar-binding-screen .radar-badge.muted { color: #626b65; background: #eef1ee; }
#radar-binding-screen .radar-badge.warn { color: #8c5100; background: #fff0c9; }
#radar-binding-screen .radar-editor { padding: 14px; }
/* o painel acompanha a rolagem da lista: marcar produto lá embaixo e salvar sem voltar ao topo */
#radar-binding-screen .radar-workspace > .radar-editor {
  position: sticky; top: 10px; max-height: calc(100vh - 24px); overflow-y: auto; }
#radar-binding-screen .radar-workspace > .radar-editor .radar-actions {
  position: sticky; bottom: -14px; margin: 10px -14px -14px; padding: 10px 14px 14px;
  background: #fff; border-top: 1px solid #eef2ef; }
#radar-binding-screen .radar-editor h3 { margin: 0 0 5px; font-weight: 500; }
#radar-binding-screen .radar-selected-path { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 12px; color: #66726a; }
#radar-binding-screen .radar-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 7px; font-weight: 500; }
#radar-binding-screen .radar-supplier-search { width: 100%; margin-bottom: 8px; }
#radar-binding-screen .radar-supplier-group { padding: 6px 8px 2px; color: #647168; }
#radar-binding-screen .radar-motivo { width: 100%; margin-top: 10px; }
#radar-binding-screen .radar-alerta { color: #8c5100; font-weight: 600; }
#radar-binding-screen .radar-inv-linha { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; }
#radar-binding-screen .radar-supplier-list { display: grid; gap: 4px; max-height: 252px; overflow-y: auto; padding-right: 3px; }
#radar-binding-screen .radar-supplier { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
#radar-binding-screen .radar-supplier:hover { background: #f1f6f2; }
#radar-binding-screen .radar-supplier input { accent-color: #2d8750; }
#radar-binding-screen .radar-supplier-name { min-width: 0; }
#radar-binding-screen .radar-supplier-name strong { display: block; font-weight: 500; }
#radar-binding-screen .radar-supplier-name span { color: #68736b; }
#radar-binding-screen .radar-inheritance { margin-top: 12px; padding: 10px; border-left: 3px solid #418a5a; background: #f1f7f2; }
#radar-binding-screen .radar-inheritance strong { font-weight: 500; }
#radar-binding-screen .radar-impact { display: grid; gap: 7px; margin: 12px 0; padding: 10px 0; border-top: 1px solid #e2e7e2; border-bottom: 1px solid #e2e7e2; }
#radar-binding-screen .radar-impact-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; align-items: start; }
#radar-binding-screen .radar-actions { display: flex; justify-content: flex-end; gap: 8px; }
#radar-binding-screen .radar-empty { display: grid; place-items: center; min-height: 360px; padding: 30px; text-align: center; color: #68736b; }
#radar-binding-screen .radar-empty svg { margin: 0 auto 8px; }
#radar-binding-screen .radar-empty .btn { margin-top: 12px; }
#radar-binding-screen .radar-empty .btn svg { margin: 0; }
#radar-binding-screen .radar-table-wrap { overflow-x: auto; }
#radar-binding-screen .radar-table { width: 100%; border-collapse: collapse; }
#radar-binding-screen .radar-table th,
#radar-binding-screen .radar-table td { padding: 10px 12px; border-bottom: 1px solid #e6eae6; text-align: left; vertical-align: middle; }
#radar-binding-screen .radar-table th { color: #627067; font-weight: 500; }
#radar-binding-screen .radar-toast { display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 11px; border-radius: 8px; color: #1d5b33; background: #e6f5ea; }
#radar-binding-screen .radar-toast.show { display: flex; }
#radar-binding-screen .radar-hidden,
#radar-binding-screen [hidden] { display: none !important; }

/* ── acréscimos, com as mesmas peças ─────────────────────────────────────────────────────────── */
#radar-binding-screen .radar-toast.warn { color: #8c5100; background: #fff0c9; }
#radar-binding-screen .radar-tree-row.radar-row-note { grid-template-columns: 28px 30px minmax(0, 1fr) auto; background: #fbfcfb; }
#radar-binding-screen .radar-tree-row.radar-row-more { display: flex; justify-content: center; min-height: 36px; }
#radar-binding-screen .radar-focus-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: #174b2c; background: #e8f4eb; border-bottom: 1px solid #d7dfd8; }
#radar-binding-screen .radar-pane > p { margin: 0 0 10px; color: #5c6a60; }
#radar-binding-screen .radar-editor > p { margin: 0 0 10px; color: #5c6a60; }
#radar-binding-screen .radar-hint { padding: 6px 8px; color: #68736b; }
#radar-binding-screen .radar-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: #5d6a61; cursor: pointer; }
#radar-binding-screen .radar-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #2d8750; cursor: pointer; }
#radar-binding-screen .radar-linha-acoes { display: inline-flex; align-items: center; gap: 6px; }
#radar-binding-screen .radar-editar-linha { min-height: 24px; padding: 0 6px; }
#radar-binding-screen .radar-focus-bar strong { font-weight: 500; }

@media (max-width: 820px) {
  #radar-binding-screen .radar-workspace { grid-template-columns: 1fr; }
  #radar-binding-screen .radar-workspace > .radar-editor {
    position: static; max-height: none; overflow: visible; }
  #radar-binding-screen .radar-stats { grid-template-columns: 1fr; }
  #radar-binding-screen .radar-heading { flex-direction: column; }
  #radar-binding-screen .radar-tree-row { grid-template-columns: 28px 30px minmax(0, 1fr); }
  #radar-binding-screen .radar-tree-row > .radar-badge { display: none; }
  #radar-binding-screen .radar-indent-3,
  #radar-binding-screen .radar-indent-4 { padding-left: 48px; }
}