/* ==========================================================================
   SOURCING — o quadro, o card aberto, a busca e a barra de visões (07/10/2026)

   Revisão do Construtor de "Sourcing › Pedidos". O quadro usa as peças padrão
   da intranet como estão (cm-* de comercial/funil.css, gqv-cfg/gqv-modal de
   globalqomex/viabilidade.css, cg-cfg-* da engrenagem por BU, cx-* do card do
   comex). Aqui fica só o que é do Sourcing.

   A página do quadro está FORA do escopo Tailwind da QMob (template/main.html,
   window.qmobEscopo), então as regras dela são simples. As tabelas (By order,
   By product) continuam DENTRO do escopo: o que vale para elas leva o prefixo
   html.qmob-scope :is(main.content,.topbar-actions) — sem ele o preflight da
   QMob ganha (ver controller/qmob/sourcing/kanban/CONTEXT.md).
   ========================================================================== */

/* ---------- a página do quadro ---------- */
.sq-page{display:flex;flex-direction:column;height:calc(100vh - 118px);min-height:460px}
.sq-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sq-top .painel-title{margin-bottom:0}
.sq-visoes{margin:10px 0 14px;align-self:flex-start}
.sq-quadro{flex:1;min-height:0;display:flex}
.sq-board{flex:1}
.gqv-cfg[hidden]{display:none}
.sq-page .cm-col-head .gqv-cfg{margin-left:2px}

/* o cemitério (padrão 9): cinza; o desfecho é que tem cor */
.sq-col--fim{--pc:var(--text-2)}
.sq-col--fim .sq-card[data-sq-antigo]{display:none}
.sq-col--fim.sq-antigos-on .sq-card[data-sq-antigo],
.sq-page.sq-buscando .sq-card[data-sq-antigo]{display:block}
.sq-card.sq-oculto,.sq-page.sq-buscando .sq-card.sq-oculto{display:none}
.sq-mais{margin-top:2px;padding:7px;font-size:11px;font-weight:600;color:var(--text-2);cursor:pointer;
  background:var(--surface);border:1px dashed var(--border);border-radius:9px;flex-shrink:0}
.sq-mais:hover{color:var(--ink);border-color:var(--text-2)}
.sq-page.sq-buscando .sq-mais{display:none}
.sq-vazia[hidden]{display:none}

/* ---------- a miniatura ---------- */
.sq-card{cursor:pointer}
.sq-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,149,109,.35)}
/* a bolinha de pendência (padrão 13): absoluta, não muda nenhuma dimensão do card */
.sq-pend{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;
  background:#c0392b;box-shadow:0 0 0 2px var(--surface)}
/* o desfecho no cemitério: chamativo de propósito (Felipe, 07/10/2026) */
.sq-desfecho{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;border-radius:5px;padding:2px 7px;color:#fff;line-height:1.5}
.sq-desfecho--aprovado{background:#1f8a4c}
.sq-desfecho--reprovado{background:#c0392b}
.sq-desfecho--cancelado{background:#6b6b5e}
.cx-modal-linha1 .sq-desfecho{margin-left:8px}
/* SLA vencido (padrão 8): contorno vermelho + a etiqueta */
.sq-card--atraso{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b}
.sq-chip--atraso{color:#fff;background:#c0392b;border-color:#c0392b}

/* ---------- a busca e a barra de visões nas TABELAS (dentro do escopo QMob) ---------- */
html.qmob-scope :is(main.content,.topbar-actions) .sq-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
html.qmob-scope :is(main.content,.topbar-actions) .sq-busca .cm-busca{width:330px;height:32px;padding:0 30px;font-size:12.5px;
  color:var(--text-primary);background:var(--card-bg,#fff);border:1px solid var(--card-border,#e0ddd0);border-radius:9px}
html.qmob-scope :is(main.content,.topbar-actions) .sq-busca .cm-busca:focus{outline:none;border-color:var(--accent);width:400px}
html.qmob-scope :is(main.content,.topbar-actions) .sq-busca .cm-busca-ico{color:var(--text-secondary)}
html.qmob-scope :is(main.content,.topbar-actions) .sq-busca .cm-busca-x{color:var(--text-secondary);background:transparent;border:0;font-size:15px}
html.qmob-scope :is(main.content,.topbar-actions) .sq-visoes{margin:10px 0 14px}
/* a linha da tabela abre o card (item 15): nota-se em qual linha o mouse está */
html.qmob-scope :is(main.content,.topbar-actions) #sourcingTableWrap tbody tr{cursor:pointer;transition:background-color .12s}
html.qmob-scope :is(main.content,.topbar-actions) #sourcingTableWrap tbody tr:hover > td{background-color:rgba(200,149,109,.10)}
html.qmob-scope :is(main.content,.topbar-actions) #sourcingTableWrap tbody tr:hover > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- o card aberto ---------- */
.sq-modal[hidden]{display:none}
/* duas classes: a .cx-modal-dialog do comex (max-width 880px) carrega depois deste arquivo */
.sq-modal .sq-modal-dialog{max-width:var(--cx-modal-w);height:calc(100vh - 48px)}
.sq-modal .cx-modal-inner{height:100%}
.sq-split{height:100%;min-height:0}
.sq-mail{display:flex;flex-direction:column;gap:10px;padding:16px 14px;background:var(--surface-2);
  border-right:1px solid var(--border);min-height:0;overflow:auto}
.sq-mail-cab{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.sq-mail-vazio{font-size:12px;color:var(--text-2);line-height:1.5}
.sq-faixa{margin:0 16px 10px;padding:7px 10px;border-radius:8px;font-size:12px;line-height:1.4;
  background:#fdf1e3;color:#8a5a14;border:1px solid rgba(217,138,31,.35)}
.sq-acao{text-decoration:none;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  color:var(--text-2);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:5px 9px}
.sq-acao:hover{color:var(--ink);border-color:var(--text-2)}
/* Group · Business type · Total on one line (2026-10-20); comex's cx-gfields is 2 columns */
.cx-gfields.sq-gfields{grid-template-columns:repeat(3,minmax(0,1fr))}
.sq-ro{display:flex;align-items:center;min-height:30px;cursor:default;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-body{flex:1;display:flex;flex-direction:column;min-height:0}
.sq-cols{flex:1;min-height:0;align-items:stretch}
.sq-main{display:flex;min-height:0}
.sq-embed{flex:1;width:100%;min-height:calc(100vh - 330px);border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.sq-data{font-size:12px;color:var(--ink)}

/* ---------- a tela de edição DENTRO do card (?embed=1 num iframe) ---------- */
html.em-card #sidebar,
html.em-card .topbar,
html.em-card #chat-widget,
html.em-card .chat-launcher{display:none !important}
html.em-card .layout{display:block}
/* Com o .layout em bloco, a .main-area perdia a altura: crescia junto com a
   tabela e o .layout (100vh, overflow hidden) cortava o resto, sem rolagem.
   Com a altura de volta, quem rola é o main.content (2026-10-23). */
html.em-card .main-area{height:100vh}
html.em-card .main-area{margin:0 !important;width:100% !important;max-width:none !important}
html.em-card main.content{padding:14px 16px !important}

/* ---------- a engrenagem da coluna ---------- */
.sq-cfg .sq-cfg-modal{max-width:680px;width:100%}
.sq-cfg-sla{display:grid;grid-template-columns:auto 84px 1fr;gap:10px;align-items:center;margin:0 0 14px;
  font-size:11.5px;color:var(--text-2)}
.sq-cfg-sla > span:first-child{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sq-cfg-sla input{height:30px}

/* os blocos da engrenagem: responsáveis, aprovadores, SLA */
.sq-cfg-bloco{padding:12px 0;border-top:1px solid var(--border)}
.sq-cfg-bloco:first-child{border-top:0;padding-top:0}
.sq-cfg-bloco h4{margin:0 0 4px;font-size:13px;font-weight:700;color:var(--ink)}
.sq-cfg-bloco .gqv-hint{margin:0 0 10px}
/* os chips de voto na miniatura (padrão 1.4) */
.sq-card .gqv-votos{margin-top:0}

/* ---------- a linha das visões: abas à esquerda, busca (e EXPORT) à direita (07/10/2026) ---------- */
.sq-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
.sq-barra .sq-visoes{margin:0}
.sq-barra-dir{display:flex;align-items:center;gap:10px}
.sq-page .sq-visoes{align-self:auto}
html.qmob-scope :is(main.content,.topbar-actions) .sq-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 14px}
html.qmob-scope :is(main.content,.topbar-actions) .sq-barra .sq-visoes{margin:0}
html.qmob-scope :is(main.content,.topbar-actions) .sq-barra-dir{display:flex;align-items:center;gap:10px}

/* Dentro do card a régua de status é a do card (cx-ruler, no topo). A da tela de
   edição seria a segunda régua do mesmo status (Felipe, 07/10/2026): some só
   aqui — aberta em tela cheia, a edição continua com a dela. */
html.em-card .sourcing-ruler{display:none !important}
/* ... e quem muda o status ali é a seta ‹‹ ›› da régua do card (padrão 2.1,
   Felipe, 20/10/2026): ela aperta estes botões, que ficam escondidos. */
html.em-card :is(#sourcingstatusprev,#sourcingstatusnext,#sourcingstatusreturnconcluded){display:none !important}

/* Tarefas › A fazer (18/10/2026, PADROES §34): com ?embed=afazer o quadro fica
   invisível (main.content) e só o card aberto aparece, por cima de Tarefas. O
   modal já vive no <body>, fora do main; a regra garante. */
html.em-afazer #sourcingCardModal{visibility:visible}

/* Controladoria › Estimativa (2026-10-20): Estimating is a waiting column; a
   card sent back by the estimate carries the reason, in Splitting. */
.sq-retorno{margin:6px 10px 0;padding:5px 8px;border-radius:6px;font-size:10.5px;line-height:1.4;
  background:#fdf3e6;color:#8a5a12;border:1px solid #f1d5a6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sq-retorno b{font-weight:700;margin-right:3px}
.sq-chip--est{background:#eef3fb;color:#1a4f8a;border-color:#c9d8ee}
.sq-faixa--retorno{background:#fdf3e6;color:#8a5a12}
.sq-retorno-msg{margin-top:4px;white-space:pre-line;color:#5c3c0b}
.sq-faixa--est{background:#eef3fb;color:#1a4f8a}
.sq-faixa--est a{color:inherit;font-weight:700}

/* ---------- 2026-10-20 (Felipe) ----------
   The responsible person is a round avatar in the miniature's corner. */
.sq-card .cm-card-meta{position:relative;padding-right:26px}
.sq-avatar{position:absolute;right:0;bottom:0;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:0;
  background:var(--surface-2,#ecebe6);color:var(--text-2);border:1px solid var(--border)}
.sq-avatar--foto{background-size:cover;background-position:center;color:transparent}

/* Estimating and Concluded: the miniature is GREY, text included — it still
   opens; in Estimating the opened card is locked (sq-split--travado).
   PADROES §40: the grey of every cemetery and waiting column. */
.sq-board .cm-col--espera .sq-card,
.sq-board .sq-col--fim .sq-card{background:#ecebe6;border-color:#dcdad3;box-shadow:none}
.sq-board .cm-col--espera .sq-card *,
.sq-board .sq-col--fim .sq-card *{color:#8d8b84 !important}
.sq-board .cm-col--espera .sq-card .cm-chip,
.sq-board .sq-col--fim .sq-card .cm-chip{background:#e4e2db;border-color:#d6d4cc}
/* the other flow's ruler (Estimativa) keeps its colour (Felipe, 2026-10-20) */
.sq-board .sq-col--fim .sq-card .sq-desfecho{background:#e4e2db;border-color:#d6d4cc}
.sq-board .cm-col--espera .sq-avatar,
.sq-board .sq-col--fim .sq-avatar{background-color:#e4e2db;border-color:#d6d4cc}

/* the opened card in Estimating: 100% grey, nothing changes */
.sq-faixa--travado{background:#ecebe6;color:#6f6d66;border-color:#dcdad3}
.sq-split--travado .sq-ro{background:#ecebe6 !important;color:#8d8b84 !important;border-color:#dcdad3 !important}
.sq-split--travado .cx-ruler-mvs{display:none}
.sq-split--travado .cx-ruler-seg--atual,
.sq-split--travado .cx-ruler-seg--current{background:#a9a7a0 !important}
/* inside the edit screen of a locked card (?embed=1&travado=1) */
html.sq-travado input, html.sq-travado select, html.sq-travado textarea, html.sq-travado button,
html.sq-travado .btn{background:#ecebe6 !important;color:#8d8b84 !important;border-color:#dcdad3 !important;
  cursor:not-allowed !important;box-shadow:none !important}
html.sq-travado a.btn, html.sq-travado [hx-post], html.sq-travado [hx-get]{pointer-events:none}

/* ---------- "+ Novo sourcing" as a card (2026-10-20) ---------- */
.sq-novo .cx-modal-right{display:flex;flex-direction:column;min-width:0;flex:1}
.sq-novo .sq-embed{min-height:calc(100vh - 170px)}
/* the question before leaving unsaved (PADROES §37) — above everything */
.sq-pergunta{position:fixed;inset:0;z-index:10050;background:rgba(15,20,30,.35);display:flex;align-items:center;justify-content:center}
.sq-pergunta-caixa{position:relative;background:var(--surface,#fff);border:1px solid var(--border);border-radius:12px;padding:18px 20px;
  width:min(420px,calc(100vw - 32px));box-shadow:0 12px 40px rgba(0,0,0,.18)}
.sq-pergunta-tit{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px;padding-right:26px}
.sq-pergunta-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface,#fff);color:var(--text-2);font-size:12px;line-height:1;cursor:pointer}
.sq-pergunta-x:hover{color:var(--ink);border-color:var(--ink)}
.sq-pergunta-txt{font-size:12.5px;color:var(--text-2);margin-bottom:14px}
.sq-pergunta-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sq-pergunta-btn{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 11px;border-radius:7px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
.sq-pergunta-btn--pri{background:var(--accent,#a67550);border-color:var(--accent,#a67550);color:#fff}
/* the create screen inside the "+ Novo sourcing" card: TEMPLATE / IMPORT stay in the page (the topbar is hidden) */
html.em-card main.content > section > [data-topbar-actions]{display:flex !important;justify-content:flex-end;gap:8px;margin:0 0 10px}
/* the new-sourcing card has no e-mail column: the create screen takes the whole width */
.cx-modal-split.sq-novo{display:flex !important;grid-template-columns:none !important}
.sq-novo > .cx-modal-right{flex:1 1 auto;width:100%;max-width:none;min-width:0}
.sq-novo .sq-cols,.sq-novo .sq-main{display:flex;flex:1;width:100%}
.sq-novo .sq-embed{width:100%}

/* ---------- By client (2026-10-20): a client card holding a minicard per sourcing ---------- */
.sq-cli{cursor:default;display:flex;flex-direction:column;gap:6px;padding:9px 10px 10px}
.sq-cli-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sq-cli-n{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--text-2);
  border:1px solid var(--border);border-radius:9px;padding:0 6px;line-height:15px}
.sq-cli-minis{display:flex;flex-direction:column;gap:5px}
.sq-mc{position:relative;cursor:pointer;background:var(--surface,#fff);border:1px solid var(--border);border-radius:7px;
  padding:5px 7px 6px;display:flex;flex-direction:column;gap:3px}
.sq-mc:hover{border-color:var(--text-2)}
.sq-mc:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(200,149,109,.35)}
.sq-mc--atraso{border-color:#c0392b;box-shadow:0 0 0 1px #c0392b}
.sq-mc-head{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sq-mc-meta{position:relative;display:flex;flex-wrap:wrap;gap:4px;padding-right:24px;min-height:20px}
.sq-mc .cm-chip{font-size:9px;padding:1px 6px}
.sq-mc .sq-avatar{width:18px;height:18px;font-size:8px}
.sq-mc .cm-tl{margin:0 0 2px}
.sq-mc.sq-oculto{display:none}
.sq-col--fim .sq-mc[data-sq-antigo]{display:none}
.sq-col--fim.sq-antigos-on .sq-mc[data-sq-antigo],
.sq-page.sq-buscando .sq-mc[data-sq-antigo]{display:flex}
.sq-page.sq-buscando .sq-mc.sq-oculto{display:none}
/* grey columns (PADROES §40): the minicards are grey too; the Estimativa ruler keeps its colour */
.sq-board .cm-col--espera .sq-mc,
.sq-board .sq-col--fim .sq-mc{background:#e4e2db;border-color:#d6d4cc}

/* Tag (multi-select) is an editable field: white like every field you fill in
   (PADROES §36, Felipe 2026-10-20) — it looked disabled on the card background.
   A locked one (.is-locked: an existing product keeps its tags) stays as is. */
html.qmob-scope main.content .multi-select:not(.is-locked) .multi-select__control{background:#fff;border-color:rgb(207,202,189)}
html.qmob-scope main.content .multi-select:not(.is-locked) .multi-select__placeholder{color:var(--text-2,#6b6b5e)}

/* "+ Novo sourcing": Client and Destination Type on one line (2026-10-20) */
html.qmob-scope main.content #sourcingcreateform .cols{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end}
html.qmob-scope main.content #sourcingcreateform .cols > .row{margin:0;flex:0 0 auto;width:auto}
.sq-cria-bu{width:200px;max-width:100%}
.sq-cria-cliente{width:420px;max-width:100%}
.sq-cria-destino{width:330px;max-width:100%}
/* the select-with-search inside the QMob scope: the Tailwind preflight strips
   button borders — give it back the look of a field (PADROES §36: white) */
html.qmob-scope main.content .sb-btn{display:block;width:100%;min-height:38px;padding:7px 30px 7px 10px;background:#fff;
  border:1px solid rgb(207,202,189);border-radius:3px;font-size:13px;text-align:left;color:var(--ink,#1a1f2e)}
html.qmob-scope main.content .sb-btn.is-vazio{color:var(--text-2,#6b6b5e)}
/* locked selector (e.g. Client before a BU is chosen) in the grey of the locked field, like
   Destination type (PADROES 36, 26/10/2026): the white above beat the .sb-btn:disabled grey */
html.qmob-scope main.content .sb-btn:disabled{background:rgba(120,130,128,.13);border-color:rgba(120,130,128,.28);color:var(--text-2,#6b6b5e);cursor:not-allowed}
html.qmob-scope main.content .sb-pop{background:#fff;border:1px solid rgb(207,202,189)}
html.qmob-scope main.content .sb-busca{border:1px solid rgb(207,202,189);background:#fff;padding:6px 8px}
html.qmob-scope main.content #sourcingBusinessType:disabled{background:rgba(120,130,128,.13);border-color:rgba(120,130,128,.28);color:var(--text-2,#6b6b5e);cursor:not-allowed;opacity:1}

/* ---------- "+ Novo sourcing" smaller (2026-10-20, Felipe — Construtor §1.7b density) ----------
   The modal takes the size of its content (the iframe height follows the
   create screen, sourcing-kanban.js ajustarAltura) and the screen inside it
   uses small type and short spacing. */
#sourcingCardModal.sq-shell--novo .cx-modal-dialog{width:min(1180px,calc(100vw - 48px));height:auto;max-height:calc(100vh - 48px)}
#sourcingCardModal.sq-shell--novo .cx-modal-inner{height:auto}
#sourcingCardModal.sq-shell--novo .cx-modal-head{padding:10px 14px 6px}
#sourcingCardModal.sq-shell--novo .cx-modal-title{font-size:17px}
#sourcingCardModal.sq-shell--novo .sq-novo .sq-embed{min-height:0;height:360px;max-height:calc(100vh - 196px)}
#sourcingCardModal.sq-shell--novo .sq-novo .cx-modal-body{padding:0 14px 14px}
/* inside the iframe (the create screen in the card) */
html.em-card main.content:has(#sourcingcreateform){padding:8px 10px !important}
html.em-card main.content:has(#sourcingcreateform) section > [data-topbar-actions]{margin:0 0 6px}
html.qmob-scope.em-card main.content #sourcingcreateform .box{padding:10px 12px}
html.qmob-scope.em-card main.content #sourcingcreateform .box.nopad{padding:0}
html.qmob-scope.em-card main.content #sourcingcreateform .label{font-size:9.5px;margin-bottom:3px}
html.qmob-scope.em-card main.content #sourcingcreateform .sb-btn{min-height:30px;padding:5px 26px 5px 9px;font-size:12px}
html.qmob-scope.em-card main.content #sourcingcreateform select{height:30px;font-size:12px;padding-top:2px;padding-bottom:2px}
html.qmob-scope.em-card main.content #sourcingcreateform table th{font-size:9.5px;padding:6px 6px}
html.qmob-scope.em-card main.content #sourcingcreateform table td{padding:5px 6px}
html.qmob-scope.em-card main.content #sourcingcreateform td input[type=text],
html.qmob-scope.em-card main.content #sourcingcreateform td select{height:26px;font-size:11.5px;padding:2px 6px}
html.qmob-scope.em-card main.content #sourcingcreateform .multi-select-horizontal .multi-select__control{height:26px;max-height:26px}
html.qmob-scope.em-card main.content :is(#submitsourcingcreate,#sourcingimport,[data-topbar-actions] .btn){font-size:10.5px;padding:5px 11px;min-height:0;height:28px}
/* the select-with-search keeps its down arrow inside the QMob scope (the
   Tailwind preflight zeroes ::after borders) */
html.qmob-scope main.content .sb-btn::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;margin-top:-5px;
  border:0 solid currentColor;border-right-width:1.5px;border-bottom-width:1.5px;transform:rotate(45deg);opacity:.65}

/* ---------- inline product search in the "+ Novo sourcing" rows (2026-10-20) ---------- */
html.qmob-scope main.content #sourcingcreateform tbody td{position:relative}
html.qmob-scope main.content #sourcingcreateform td.sqb-carregando::after{content:"";position:absolute;right:12px;top:50%;width:11px;height:11px;margin-top:-6px;
  border:2px solid rgba(26,31,46,.18);border-top-color:var(--accent,#a67550);border-radius:50%;animation:sqb-gira .7s linear infinite}
@keyframes sqb-gira{to{transform:rotate(360deg)}}
.sqb-pop{position:fixed;z-index:9000;width:min(420px,70vw);max-height:300px;overflow-y:auto;
  background:#fff;border:1px solid rgb(207,202,189);border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px}
.sqb-op{display:block;width:100%;text-align:left;background:none;border:0;border-radius:5px;padding:6px 8px;cursor:pointer;font-size:11.5px}
.sqb-op:hover,.sqb-op:focus-visible{background:var(--surface-2,#f1f0ec);outline:none}
.sqb-op .product-search-item__partnum{font-weight:700;font-size:12px}
.sqb-op .product-search-item__details{color:var(--text-2,#6b6b5e);font-size:10.5px;line-height:1.35}
.sqb-vazio{padding:8px;font-size:11.5px;color:var(--text-2,#6b6b5e)}
/* the locked row: grey (PADROES §36) except Quantity and the search field */
html.qmob-scope main.content #sourcingcreateform .sqb-trava{background:rgba(120,130,128,.13) !important;border-color:rgba(120,130,128,.28) !important;color:var(--text-2,#6b6b5e) !important;cursor:not-allowed}
html.qmob-scope main.content #sourcingcreateform select.sqb-trava,html.qmob-scope main.content #sourcingcreateform [data-multiselect].sqb-trava{pointer-events:none}
html.qmob-scope main.content #sourcingcreateform [data-multiselect].sqb-trava .multi-select__control{background:rgba(120,130,128,.13) !important;border-color:rgba(120,130,128,.28) !important}
html.qmob-scope main.content #sourcingcreateform .sqb-origem{padding-right:22px !important}
html.qmob-scope main.content .sqb-x{position:absolute;right:10px;top:50%;margin-top:-9px;width:18px;height:18px;border:0;border-radius:50%;
  background:rgba(26,31,46,.08);color:var(--ink,#1a1f2e);font-size:13px;line-height:18px;text-align:center;cursor:pointer;padding:0}
html.qmob-scope main.content .sqb-x:hover{background:rgba(192,57,43,.15);color:#c0392b}
.sqb-pop{font-family:inherit;color:var(--ink,#1a1f2e)}
.sqb-op .product-search-item__detail{display:inline;margin-right:8px}
.sqb-op mark{background:#f5d9b8;color:inherit;padding:0 1px;border-radius:2px}

/* Searching waits on Operação › Busca (2026-10-21): the SKU bar takes the
   ruler's place — one segment per SKU, lit when its Busca card is concluded.
   It keeps its colour on the grey waiting card. */
.sq-bb{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.sq-bb-barra{flex:1;min-width:0;display:flex;gap:2px;height:8px;overflow:hidden}
.sq-bb-barra i{flex:1 1 0;min-width:0;border-radius:2px;background:#d9d6cc}
.sq-bb-barra--cont{border-radius:2px;background:#d9d6cc}
.sq-bb-barra--cont i{flex:0 0 auto}
.sq-board .cm-col--espera .sq-card .sq-bb-barra i.is-on,
.sq-bb-barra i.is-on{background:var(--accent,#a67550)}
.sq-board .cm-col--espera .sq-card .sq-bb-num,
.sq-bb-num{font-family:var(--font-mono,monospace);font-size:12px;color:var(--ink,#1a1f2e) !important;white-space:nowrap}
.sq-board .cm-col--espera .sq-card .sq-bb-num b,
.sq-bb-num b{font-size:16px;font-weight:700;color:var(--accent,#a67550) !important}

/* miniature (2026-10-21, Felipe): client + code on one line, code at the right;
   the date as plain text, not a tag */
.sq-card .sq-linha1{padding-top:8px;justify-content:space-between;gap:8px}
.sq-card .sq-linha1 .cm-card-cliente-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-card .sq-linha1 .sq-code{flex-shrink:0;margin-left:auto}
.sq-card .sq-data{font-family:var(--font-mono,monospace);font-size:10px;color:var(--text-2,#6b6b5e);white-space:nowrap}
.sq-board .cm-col-body{overflow-x:hidden}
.sq-card .cm-card-meta .sq-desfecho{margin-left:0}

/* the stage tabs over the opened card's product table (2026-10-21) —
   the segmented control of Comercial › Fornecedores (.cf-modos) */
.sq-etapas{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;margin:0 0 10px;border-radius:9px;background:var(--surface-2,#f1efe8);border:1px solid var(--border,#e2dfd5)}
.sq-etapa{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--text-2,#6b6b5e);text-decoration:none;white-space:nowrap}
.sq-etapa i{font-style:normal;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--border,#e2dfd5);color:var(--text-2,#6b6b5e)}
.sq-etapa:hover{color:var(--ink,#1a1f2e)}
.sq-etapa.is-on{background:var(--surface,#fff);color:var(--ink,#1a1f2e);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.sq-etapa.is-atual i{background:var(--accent,#a67550);color:#fff}
.sq-etapa.is-futura{opacity:.55;cursor:not-allowed}
.sq-etapa-aviso{margin:-4px 0 10px;font-size:12px;color:var(--text-2,#6b6b5e)}

/* The opened card's table, denser (2026-10-21, Felipe): smaller type; what was
   filled before is plain words in the line, not a field; one Description
   column that switches PT-BR / EN-US on its header. */
html.qmob-scope main.content #sourcingupdateform td,
html.qmob-scope main.content #sourcingupdateform th{font-size:11.5px}
html.qmob-scope main.content #sourcingupdateform td{padding-top:4px;padding-bottom:4px}
html.qmob-scope main.content #sourcingupdateform .tb-input,
html.qmob-scope main.content #sourcingupdateform .tb-select{font-size:11.5px;height:28px;padding:3px 7px}
html.qmob-scope main.content #sourcingupdateform .tb-span,
html.qmob-scope main.content #sourcingupdateform .sq-txt{font-size:11.5px;color:var(--ink,#1a1f2e)}
#sourcingupdateform .sq-txt .tb-span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
/* a read-only view (past stage tab, locked column): the locked fields read as text */
html.sq-travado #sourcingupdateform .tb-input,
html.sq-travado #sourcingupdateform .tb-select,
html.qmob-scope main.content #sourcingupdateform .tb-input[readonly]{border-color:transparent !important;background:transparent !important;
  box-shadow:none !important;padding-left:0;padding-right:0;color:var(--ink,#1a1f2e) !important;-webkit-appearance:none;appearance:none;cursor:default}
.sq-desc-en{display:none}
table.sq-ver-en .sq-desc-pt{display:none}
table.sq-ver-en .sq-desc-en{display:block}
.sq-desc-tog{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.sq-desc-tog i{font-style:normal;font-size:9px;margin-left:4px;padding:1px 5px;border-radius:999px;background:var(--accent,#a67550);color:#fff;letter-spacing:.04em}
.sq-desc-tog:hover{color:var(--accent,#a67550)}

/* inside the card the client strip repeats the header (2026-10-21) */
html.em-card .sq-cab--vazio{display:none !important}
html.em-card .sq-cab .sq-cab-cliente{display:none}


/* the line's link to its Operação › Busca card (2026-10-21) */
#sourcingupdateform .sq-bsc{display:block;margin:3px auto 0;padding:1px 6px;border-radius:999px;border:1px solid var(--border,#d8d4c6);
  background:#fff;font-family:var(--font-mono,monospace);font-size:9.5px;font-weight:600;color:var(--accent,#a67550);cursor:pointer;white-space:nowrap}
#sourcingupdateform .sq-bsc:hover{border-color:var(--accent,#a67550)}
#sourcingupdateform .sq-bsc--concluido{background:#e7f3ec;border-color:#bfdcc9;color:#1f7a45}
#sourcingupdateform .sq-bsc--standby{background:#ecebe6;color:#6f6d66}

/* locked card (Searching, Estimating, a past stage): the stage tabs, the Busca
   link and the Description switch still work — they only look (2026-10-21) */
html.sq-travado .sq-etapas, html.sq-travado .sq-etapas *,
html.sq-travado .sq-bsc, html.sq-travado .sq-desc-tog, html.sq-travado .sq-desc-tog *{pointer-events:auto}
/* the table's horizontal scroll (2026-10-23): .catalogScroll is written inside
   #sourcingupdateform, which carries hx-post, so it inherited the
   pointer-events:none above — the bar was drawn but dead. The container takes
   the pointer back; its contents stay inert, so the wheel over a row falls
   through to the container and scrolls it. */
html.sq-travado .catalogScroll{pointer-events:auto}
html.sq-travado .catalogScroll > *{pointer-events:none}
html.sq-travado #sourcingupdateform .sq-bsc{background:#fff !important;color:var(--accent,#a67550) !important;border-color:var(--border,#d8d4c6) !important}
html.sq-travado #sourcingupdateform .sq-desc-tog{background:none !important;border:0 !important;color:inherit !important}

/* Building supplier (2026-10-21): grey and empty when no supplier has a quote */
#sourcingupdateform .sq-forn-sem{display:block;height:28px;line-height:28px;padding:0 8px;border:1px solid #dcdad3;border-radius:4px;
  background:#ecebe6;color:#8d8b84;font-size:11.5px;cursor:not-allowed}
#sourcingupdateform select.sq-forn{font-family:var(--font-mono,monospace)}

/* the proposal PDF on the miniature (PADROES §29, 2026-10-21): red even on the grey cemetery card */
.sq-card .sq-pdf{display:inline-flex;border-radius:4px;transition:transform .12s}
.sq-card .sq-pdf:hover{transform:scale(1.12)}
.sq-card .sq-pdf .cg-fico{width:18px;height:22px;flex-basis:18px}
.sq-card .sq-pdf .cg-fico b{font-size:6px;margin-top:4px}
.sq-board .sq-col--fim .sq-card .sq-pdf .cg-fico,
.sq-board .sq-col--fim .sq-card .sq-pdf .cg-fico *{color:#c0392b !important}

/* Splitting top (2026-10-22, Felipe): what is still missing to enter
   Estimating — red badge with the count (PADROES 13), the list inside. */
.sq-split-topo{display:flex;gap:14px;align-items:flex-start;margin:0 0 10px}
.sq-faltas{position:relative;flex:1;min-width:0;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:6px;background:#f2f0e7;font-size:12px;line-height:1.45}
.sq-faltas .pend-badge-num{position:absolute;left:9px;top:8px}
.sq-faltas ul{margin:3px 0 0;padding-left:16px}
.sq-faltas--ok{padding-left:12px;color:#2e7d4f}
/* the reasons of a refused automatic save (Building/Splitting, 2026-10-22) */
.sq-automsg{margin:0 0 10px;padding:8px 12px;border:1px solid #d93025;border-radius:6px;background:#fff;color:#a52714;font-size:12px;line-height:1.45}
.sq-automsg ul{margin:3px 0 0;padding-left:16px}
/* o erro de uma linha aparece embaixo dela, não na caixa de cima (2026-10-23) */
#sourcingupdateform tr.sq-linha-erro > td{padding:2px 8px 8px 48px;border-top:0;color:#a52714;font-size:11.5px;line-height:1.45;background:#fff6f5}

/* Product rows (Felipe, 2026-10-26): "+ adicionar linha" under the rows (Create on
   the right), and the # column narrow and quiet — every bit of width counts. */
html.qmob-scope main.content .sq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px}
html.qmob-scope main.content .sq-add-linha{border:0;background:none;padding:4px 2px;font:inherit;font-size:12.5px;font-weight:600;color:var(--sidebar-bg,#1a1f2e);cursor:pointer}
html.qmob-scope main.content .sq-add-linha:hover{text-decoration:underline}
html.qmob-scope main.content :is(#sourcingcreateform, #sourcingupdateform[data-sourcing-status="1"]) table :is(th,td):first-child{width:18px;padding-left:6px;padding-right:2px;font-size:10px;font-weight:400;color:var(--text-2,#9a9588)}
/* Create = the modal's action (Felipe, 2026-10-26): on the page, at the end of the form on the
   right; inside the board's modal (embedded, html.em-card) pinned to the modal's bottom right,
   with room left under the table so the button never covers a row. */
html.qmob-scope main.content .sq-cria-rodape{display:flex;justify-content:flex-end;padding:12px 0 4px}
/* inside the board's modal the modal's own footer carries Create (2026-10-26): the screen's stays hidden, still pressed by it */
html.qmob-scope.em-card main.content .sq-cria-rodape{display:none}
#sourcingCardModal .sq-novo-rodape{display:flex;justify-content:flex-end;padding:10px 14px 14px;border-top:1px solid var(--card-border,#e3dfd2)}
#sourcingCardModal .sq-novo-criar{height:32px;padding:0 18px;border:0;border-radius:3px;background:var(--accent-dark,var(--accent,#a67550));color:#fff;font:inherit;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
#sourcingCardModal .sq-novo-criar:hover{background:var(--accent,#a67550)}
/* what Create still misses, in red (Felipe, 2026-10-26) — the header's selects and the select-with-search button too */
html.qmob-scope main.content #sourcingcreateform :is(select.er, input.er, .sb-btn.er){border-color:#d93025!important;box-shadow:0 0 0 1px #d93025}
/* the row's actions on one line (Felipe, 2026-10-26): comment + clip (.le) and the "−"
   (.actionwrp) are two inline-flex boxes; the second sat on the text baseline, lower */
html.qmob-scope main.content td.action :is(.le, .actionwrp){vertical-align:middle}
html.qmob-scope main.content td.action .actionwrp .btn.ico{box-sizing:border-box}

/* By client (Felipe, 2026-10-26): the company card is a TRAY and its miniatures sit
   on it — a slightly darker, warm tray and lighter miniatures with a faint shadow,
   inside the sober palette (PADROES 1.2). Waiting and cemetery columns stay grey
   (PADROES 40) with the same hierarchy: darker grey tray, lighter grey miniatures. */
.sq-board--cli .sq-cli{background:#f0ede4;border-color:#e2ddd0}
.sq-board--cli .sq-mc{background:#fff;border-color:#e6e2d8;box-shadow:0 1px 2px rgba(40,35,20,.06)}
.sq-board--cli .sq-mc:hover{border-color:var(--text-2)}
.sq-board--cli .cm-col--espera .sq-cli,
.sq-board--cli .sq-col--fim .sq-cli{background:#e5e3dc;border-color:#d6d4cc}
.sq-board--cli .cm-col--espera .sq-mc,
.sq-board--cli .sq-col--fim .sq-mc{background:#f1f0eb;border-color:#dcdad3;box-shadow:none}

/* ---------- o card aberto: conversa à esquerda, sem a coluna "Datas" (26/10/2026) ----------
   Abas E-mails · Comentários (Construtor 3.5); a coluna da esquerda tem a borda
   do lado do meio. As datas saíram e a tela de edição ocupa a largura toda. */
.sq-esq{border-left:0;border-right:1px solid var(--border)}
.sq-esq .cx-rep-body{padding:0}
.sq-esq .sq-mail-vazio{padding:14px}
/* Telas de 1101 a 1400px: o controle.css (Comex) joga a coluna de conversa para o
   topo, na largura toda (.cx-rep{grid-column:1 / -1}), e a tela de edição ficava
   espremida em 320px. No card do Sourcing a conversa continua ao lado. */
@media (max-width:1400px) and (min-width:1101px){
  .cx-modal-split.sq-split > .cx-rep.sq-esq{grid-column:auto;border-top:0;max-height:none}
}
.sq-aba-n:empty{display:none}
.sq-aba-n{min-width:16px;padding:1px 5px;border-radius:8px;background:var(--accent,#c8956d);color:#fff;
  font-size:9px;line-height:1.3;text-align:center;letter-spacing:0}
.sq-com-erro{padding:7px 9px;border-radius:8px;font-size:11.5px;background:#fbeaea;color:#a12d22;border:1px solid rgba(192,57,43,.3)}
.sq-cols.cx-modal-cols{grid-template-columns:minmax(0,1fr)}
/* dentro do card, em Building, Template / Import / Cancel não aparecem (26/10/2026, Felipe) */
html.em-card main.content > section > [data-topbar-actions].sq-top--building{display:none !important}
/* Building inside the card: the first section has nothing visible (no action row,
   empty header strip, hidden ruler) — it leaves the flow so the stage tabs start
   at the top (26/10/2026, Felipe). The status buttons stay in the DOM; the card
   ruler still clicks them. */
html.em-card main.content > section:has(> .sq-top--building):has(> .sq-cab--vazio){display:none !important}
html.em-card main.content > section:has(.sq-etapas){margin-top:0 !important;padding-top:0 !important}
html.em-card main.content:has(.sq-top--building){padding-top:10px !important}

/* ---------- Building: o » na aresta direita e o arrastar para Searching (26/10/2026) ----------
   Mesmo desenho do .gtw-empurra (Global Trade Workflow, PADROES 10): faixa na
   lateral inteira do card; o card ganha recuo à direita para o texto não passar
   por baixo. Arrastar só vale para a coluna Searching. */
.sq-card--empurra{position:relative;padding-right:26px}
.sq-empurra{position:absolute;right:0;top:0;bottom:0;width:20px;display:grid;place-items:center;cursor:pointer;
  border:0;border-left:1px solid var(--border);border-radius:0 8px 8px 0;background:var(--surface-2);
  color:var(--text-secondary,var(--text-2));transition:background .14s,color .14s;padding:0}
.sq-empurra span{font-size:14px;font-weight:700;line-height:1;letter-spacing:-1px}
.sq-empurra:hover{background:#7a5d1a;color:#fff;border-left-color:#7a5d1a}
.sq-empurra:focus-visible{outline:2px solid #c8956d;outline-offset:-2px}
.sq-empurra:disabled{cursor:wait;opacity:.6}
.sq-card--empurra[draggable="true"]{cursor:grab}

/* ---------- Searching dentro do card: o resumo (26/10/2026) ----------
   Mesma tabela do Building, só leitura: #, PN, Description, Qty | Supplier, FOB,
   Lead time, MOQ. Uma linha por fornecedor escolhido; o produto aparece só na
   primeira. MOQ acima da quantidade pedida fica vermelho. */
table.sq-resumo td.sq-res-sep,table.sq-resumo th.sq-res-sep{border-left:2px solid var(--border,#e2dfd5)}
table.sq-resumo td.sq-moq-acima{color:#c0392b;font-weight:700}
table.sq-resumo .sq-res-sem{color:var(--text-2,#8a8780);font-style:italic}
html.em-card #sourcingupdateform:has(table.sq-resumo) .sq-validar{display:none}

/* ---------- Building dentro do card: sem Tags/Group, com as colunas dos Searchers (26/10/2026) ----------
   Tags e Group somem só no card aberto (continuam no formulário e são gravados).
   Cada Searcher (categoria em Pessoas) é uma coluna com a bandeira do país dele;
   o nome e o país aparecem ao passar o mouse. */
html.em-card .sq-col-oculta{display:none !important}
.sq-srch-col{width:34px;min-width:34px;text-align:center;padding-left:2px !important;padding-right:2px !important}
.sq-srch-h{font-size:17px;line-height:1;cursor:help;display:inline-block}
.sq-srch{width:15px;height:15px;cursor:pointer;accent-color:var(--accent,#c8956d);margin:0}
.sq-srch:disabled{cursor:not-allowed;opacity:.45}
.sq-srch.is-salvando{opacity:.5}

/* ---------- Searchers × supplier em cada linha do Building (26/10/2026) ----------
   Legenda "Searchers" sobre o grupo; bandeira com as iniciais embaixo. Linha com
   supplier: as células ficam hachuradas e o checkbox apagado (não precisa de
   Searcher). Linha sem nenhum dos dois: faixa âmbar na borda esquerda. */
th.sq-srch-col{vertical-align:bottom;padding-top:18px !important}
th.sq-srch-col.sq-srch-ini{position:relative}
.sq-srch-col.sq-srch-ini{border-left:1px solid var(--border)}
.sq-srch-grupo{position:absolute;left:0;top:4px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary,var(--text-2));text-align:center;border-bottom:1px solid var(--border);padding-bottom:2px;white-space:nowrap;pointer-events:none}
.sq-srch-h{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.sq-srch-h i{font-style:normal;font-size:8.5px;font-weight:700;letter-spacing:.04em;line-height:1;color:var(--text-secondary,var(--text-2))}
td.sq-srch-off{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(127,127,127,.12) 4px 6px)}
td.sq-srch-off .sq-srch{opacity:.3}
td.sq-pend-linha{box-shadow:inset 3px 0 0 #d9a441}
.sq-prontas{font-size:11.5px;color:var(--text-secondary,var(--text-2))}
.sq-prontas.is-pend{color:#8a5a00;font-weight:600}

/* Searching: a seta de devolução para o Building, na régua do card (26/10/2026) */
.cx-ruler-mv.sq-devolver svg{width:11px;height:11px;stroke-width:2.6} /* same box and white as the » next to it */
.cx-ruler-mv.sq-devolver:disabled{opacity:.5;cursor:wait}

/* a régua do Searching por posição (26/10/2026): verde = todos os Searchers cotaram */
.sq-board .cm-col--espera .sq-card .sq-bb-barra i.is-ok,
.sq-bb-barra i.is-ok{background:#3f8f5a}
.sq-bb-barra--densa{gap:0}
.sq-bb-barra--densa i{border-radius:0}

/* ---------- Searching no card: um grupo de 4 colunas por Searcher (26/10/2026) ----------
   Legenda (bandeira + nome) sobre Supplier·FOB·Lead time·MOQ; grupos alternam
   um fundo leve; linha não atribuída ao Searcher fica hachurada. */
table.sq-resumo th.sq-res-com-cap{position:relative;padding-top:20px !important;vertical-align:bottom}
table.sq-resumo .sq-res-cap{position:absolute;left:8px;top:4px;width:330px;font-size:10.5px;font-weight:700;letter-spacing:0;
  text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-1,#1a1f2e);cursor:help}
table.sq-resumo .sq-res-g1{background:rgba(127,127,127,.045)}
table.sq-resumo td.sq-res-na{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(127,127,127,.11) 4px 6px)}
#sourcingupdateform:has(table.sq-resumo) .table-wrap,#sourcingupdateform:has(table.sq-resumo) .tablewrp{overflow-x:auto}

/* ---------- chat com os Searchers (27/10/2026) ----------
   Miniatura: ícone grande no centro, à frente de tudo, com o contador vermelho
   de conversas esperando resposta. Tabela do Searching: o ícone da linha. */
.sq-card--chat{position:relative}
.sq-chat-pend{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;color:#7a5d1a;pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(26,31,46,.25))}
.sq-chat-pend svg{display:block}
.sq-chat-pend b{position:absolute;top:-6px;right:-9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d93025;color:#fff;
  font:700 11px/18px var(--font-sans,system-ui);text-align:center;box-shadow:0 0 0 2px #fff}
.sq-chat-btn{position:relative;display:inline-grid;place-items:center;width:30px;height:26px;border:1px solid var(--border,#e2dfd5);border-radius:6px;
  background:var(--surface,#fff);color:var(--text-2,#6b6b6b);cursor:pointer;padding:0}
.sq-chat-btn:hover{color:#7a5d1a;border-color:#c8956d}
.sq-chat-btn.is-pend{color:#7a5d1a;border-color:#c8956d}
.sq-chat-btn .sq-chat-n:empty{display:none}
.sq-chat-btn .sq-chat-n{position:absolute;top:-7px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#d93025;color:#fff;
  font:700 10px/16px var(--font-sans,system-ui);box-shadow:0 0 0 2px #fff}
.sqc-ov{position:fixed;inset:0;z-index:100005;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(26,31,46,.45)}
.sqc-box{width:min(560px,100%);max-height:min(640px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--surface,#fff);
  border:1px solid var(--border,#e2dfd5);border-radius:10px;box-shadow:0 14px 44px rgba(26,31,46,.3);overflow:hidden}
.sqc-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.sqc-rot{font:600 9.5px var(--font-mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2,#8a8780)}
.sqc-tit{font-size:16px;font-weight:700;margin-top:2px}
.sqc-x{border:1px solid var(--border,#e2dfd5);background:none;border-radius:6px;width:28px;height:28px;cursor:pointer}
.sqc-abas{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px;border-bottom:1px solid var(--border,#e2dfd5)}
.sqc-aba{position:relative;border:1px solid var(--border,#e2dfd5);background:none;border-radius:16px;padding:4px 11px;font-size:12px;cursor:pointer}
.sqc-aba.is-on{background:#7a5d1a;border-color:#7a5d1a;color:#fff}
.sqc-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#d93025;box-shadow:0 0 0 2px #fff}
.sqc-msgs{flex:1;min-height:160px;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2,#faf8f3)}
.sqc-msg{max-width:82%;padding:7px 10px;border-radius:10px;font-size:13px;line-height:1.4}
.sqc-msg--nos{align-self:flex-end;background:#f1e6d8}
.sqc-msg--ele{align-self:flex-start;background:var(--surface,#fff);border:1px solid var(--border,#e2dfd5)}
.sqc-msg--inicial{align-self:stretch;max-width:none;background:none;border:1px dashed var(--border,#d6d2c6);font-style:italic}
.sqc-msg-ass{margin-top:3px;font-size:10.5px;color:var(--text-2,#8a8780)}
.sqc-vazio{font-size:12px;color:var(--text-2,#8a8780);text-align:center;padding:10px}
.sqc-form{display:flex;gap:8px;padding:10px 16px 14px;border-top:1px solid var(--border,#e2dfd5)}
.sqc-form textarea{flex:1;resize:vertical;min-height:40px;border:1px solid var(--border,#e2dfd5);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px}
.sqc-enviar{align-self:flex-end;border:0;border-radius:8px;background:#7a5d1a;color:#fff;font-weight:600;padding:8px 14px;cursor:pointer}
.sqc-enviar:disabled{opacity:.6;cursor:wait}

/* Searching: a borda esquerda da linha alterna "seguir sem este produto" (27/10/2026) */
table.sq-resumo td.sq-sem-cel{padding:0 !important;position:relative}
.sq-sem-btn{width:100%;min-height:44px;border:0;border-left:3px solid transparent;background:none;font:inherit;font-weight:600;cursor:pointer;color:inherit}
.sq-sem-btn:hover{border-left-color:#c8956d;background:rgba(200,149,109,.12)}
.sq-sem-btn:disabled{cursor:wait;opacity:.6}
table.sq-resumo tr:has(td.sq-sem) td{background:#e7e5df !important;color:#9a978f !important}
table.sq-resumo tr:has(td.sq-sem) td *:not(.sq-sem-btn){color:#9a978f !important}
table.sq-resumo td.sq-sem .sq-sem-btn{border-left-color:#9a978f;text-decoration:line-through}
.sq-ds-btn{display:inline-grid;place-items:center;width:30px;height:26px;border:1px solid var(--border,#e2dfd5);border-radius:6px;background:var(--surface,#fff);
  color:var(--text-2,#8a8780);cursor:pointer}
.sq-ds-btn.has{color:#a12d22;border-color:rgba(161,45,34,.35)}
.sq-ds-btn:hover{border-color:#c8956d;color:#7a5d1a}

/* the waiting column greys everything (§40): the chat icon and its count keep their colours */
.sq-board .cm-col--espera .sq-card .sq-chat-pend{color:#7a5d1a !important}
.sq-board .cm-col--espera .sq-card .sq-chat-pend b{color:#fff !important}

/* the left edge, wider and visible (27/10/2026): a light bar on every line,
   amber on hover — the whole # cell is the button */
table.sq-resumo th.sq-sem-h,table.sq-resumo td.sq-sem-cel{width:40px;min-width:40px}
table.sq-resumo td.sq-sem-cel{height:1px}
.sq-sem-btn{display:block;width:100%;height:100%;min-height:52px;border-left:5px solid #e2dfd5;padding:0 0 0 2px}
.sq-sem-btn:hover{border-left-color:#d9a441;background:rgba(217,164,65,.14)}

/* the locked Searching card keeps its line tools as they are (27/10/2026) */
html.sq-travado button.sq-sem-btn{background:none !important;color:inherit !important;border-color:transparent !important;border-left-color:#e2dfd5 !important;cursor:pointer !important}
html.sq-travado button.sq-sem-btn:hover{border-left-color:#d9a441 !important;background:rgba(217,164,65,.14) !important}
html.sq-travado td.sq-sem button.sq-sem-btn{border-left-color:#9a978f !important}
html.sq-travado button.sq-chat-btn{background:var(--surface,#fff) !important;color:var(--text-2,#6b6b6b) !important;border-color:var(--border,#e2dfd5) !important;cursor:pointer !important}
html.sq-travado button.sq-chat-btn.is-pend{color:#7a5d1a !important;border-color:#c8956d !important}
html.sq-travado .sqc-box button,html.sq-travado .sqc-box textarea{background:revert !important;color:revert !important;border-color:revert !important;cursor:pointer !important}
html.sq-travado .sqc-box .sqc-aba.is-on,html.sq-travado .sqc-box .sqc-enviar{background:#7a5d1a !important;color:#fff !important;border-color:#7a5d1a !important}
html.sq-travado .sqc-box .sqc-aba{background:none !important;border:1px solid var(--border,#e2dfd5) !important;color:inherit !important}
html.sq-travado .sqc-box textarea{cursor:text !important;background:#fff !important;border:1px solid var(--border,#e2dfd5) !important}
/* the locked card turns the mouse off on the whole form ([hx-post]): the line
   tools of the Searching table take it back (27/10/2026) */
html.sq-travado .sq-sem-btn,html.sq-travado .sq-chat-btn,html.sq-travado .sq-ds-btn,
html.sq-travado .sq-ds-btn input,html.sq-travado [data-sq-desc]{pointer-events:auto !important}

/* ---------- Searching: a cotação escolhida por linha (27/10/2026) ----------
   As 4 células de uma cotação formam o quadro: no hover clareiam juntas; a
   escolhida ganha a moldura em negrito. */
table.sq-resumo td.sq-cot.is-clicavel{cursor:pointer}
table.sq-resumo td.sq-cot.is-hover{background:rgba(122,93,26,.10) !important}
table.sq-resumo td.sq-cot.is-salvando{opacity:.55}
table.sq-resumo td.sq-cot.is-escolhida{background:rgba(122,93,26,.07) !important;box-shadow:inset 0 2.5px 0 #1a1f2e,inset 0 -2.5px 0 #1a1f2e}
table.sq-resumo td.sq-cot.is-escolhida.sq-cot-ini{box-shadow:inset 2.5px 0 0 #1a1f2e,inset 0 2.5px 0 #1a1f2e,inset 0 -2.5px 0 #1a1f2e}
table.sq-resumo td.sq-cot.is-escolhida.sq-cot-fim{box-shadow:inset -2.5px 0 0 #1a1f2e,inset 0 2.5px 0 #1a1f2e,inset 0 -2.5px 0 #1a1f2e}
table.sq-resumo td.sq-cot.is-escolhida:first-child{font-weight:700}
html.sq-travado table.sq-resumo td.sq-cot.is-clicavel{pointer-events:auto !important}
/* a miniatura do Searching pronta para seguir: check verde ou amarelo escuro, à frente de tudo */
.sq-check{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 2px 6px rgba(26,31,46,.25))}
.sq-check svg{display:block}
.sq-board .cm-col--espera .sq-card .sq-check--verde,.sq-check--verde{color:#2f8a4f !important}
.sq-board .cm-col--espera .sq-card .sq-check--amarelo,.sq-check--amarelo{color:#a87b12 !important}
.sq-card--chat .sq-check + .sq-chat-pend{left:calc(50% + 26px)}
.sq-card--chat .sq-check:has(+ .sq-chat-pend){left:calc(50% - 22px)}

/* Estimating: the estimate data sheet on the miniature keeps its green in the grey column */
.sq-board .cm-col--espera .sq-card .sq-xls .cg-fico,
.sq-board .cm-col--espera .sq-card .sq-xls .cg-fico *{color:#1e8449 !important}

/* ✅ on the Searcher's last message (27/10/2026): answered without writing */
.sqc-msg{position:relative}
.sqc-ok,.sqc-ok-btn{position:absolute;top:-9px;right:-9px;font-size:15px;line-height:1}
.sqc-ok-btn{border:1px dashed #c8956d;border-radius:50%;width:26px;height:26px;background:#fff;cursor:pointer;filter:grayscale(1);opacity:.75;padding:0}
.sqc-ok-btn:hover{filter:none;opacity:1;border-style:solid}
html.sq-travado .sqc-box .sqc-ok-btn{background:#fff !important;border:1px dashed #c8956d !important;pointer-events:auto !important}

/* "Cancelar sourcing" na base do card, no canto (27/10/2026) */
.sq-rodape{display:flex;justify-content:flex-end;padding:8px 16px 12px;border-top:1px solid var(--border)}
.sq-cancelar{border:1px solid rgba(192,57,43,.45);background:none;color:#c0392b;border-radius:6px;padding:6px 12px;font:600 12px var(--font-sans,system-ui);cursor:pointer}
.sq-cancelar:hover{background:#c0392b;color:#fff}
.sq-cancelar:disabled{opacity:.6;cursor:wait}
/* Searching opens locked, but its own ruler tools stay: the return arrow to
   Building and the » to Splitting (27/10/2026) */
.sq-split--travado .cx-ruler-mvs:has([data-sq-devolver],[data-sq-avancar]){display:flex}
.sq-split--travado .cx-ruler-mvs:has([data-sq-devolver],[data-sq-avancar]) .cx-ruler-mv:not([data-sq-devolver]):not([data-sq-avancar]){display:none}
/* the grey of the waiting column reaches the svg itself (".sq-card *"): the
   check and the chat icon keep their colour down to the drawing (27/10/2026) */
.sq-board .cm-col--espera .sq-card .sq-check--verde,
.sq-board .cm-col--espera .sq-card .sq-check--verde *{color:#2f8a4f !important}
.sq-board .cm-col--espera .sq-card .sq-check--amarelo,
.sq-board .cm-col--espera .sq-card .sq-check--amarelo *{color:#a87b12 !important}
.sq-board .cm-col--espera .sq-card .sq-chat-pend svg,
.sq-board .cm-col--espera .sq-card .sq-chat-pend svg *{color:#7a5d1a !important}
/* the not-yet-100% check takes the same tone as the bar of the miniature (27/10/2026) */
.sq-check--amarelo,
.sq-board .cm-col--espera .sq-card .sq-check--amarelo,
.sq-board .cm-col--espera .sq-card .sq-check--amarelo *{color:var(--accent,#a67550) !important}
/* inside the card, at every stage: no Template, Import or Cancel in the edit
   screen (27/10/2026, Felipe) — cancelling is the "Cancelar sourcing" at the
   bottom of the card; Shipping (Estimating) and Approve/Reject stay */
html.em-card [data-topbar-actions] a[href*="/qmob/sourcing/update/"][href$=".xlsx"],
html.em-card [data-topbar-actions] a[href*=".xlsx/"],
html.em-card [data-topbar-actions] #sourcingupdateimport,
html.em-card [data-topbar-actions] #sourcingstatuscancel,
html.em-card [data-topbar-actions] #shippingSimBtn,
html.em-card [data-topbar-actions] #sourcingstatusreject,
html.em-card [data-topbar-actions] #sourcingstatusapprove{display:none !important} /* Shipping; Reject/Approve went to the card's bottom (27/10/2026, Felipe) */
html.em-card [data-topbar-actions]:not(:has(.btn:not(#sourcingupdateimport):not(#sourcingstatuscancel):not(#shippingSimBtn):not(#sourcingstatusreject):not(#sourcingstatusapprove):not([href*=".xlsx"]))){display:none !important}
/* the section that holds an empty top bar would still leave its 24px margin
   above the stage tabs (27/10/2026): it goes too */
html.em-card main.content > section:has(> [data-topbar-actions]){margin-bottom:0 !important}
html.em-card [data-topbar-actions]{margin-bottom:14px}
/* the old status ruler of the edit screen is hidden inside the card, but its
   section kept a 24px margin above the stage tabs (27/10/2026): it goes */
html.em-card main.content section:has(> .sourcing-ruler){display:none !important}

/* Splitting: the Supplier select, as the Building's (27/10/2026) */
td[data-sq-split-forn] select.sq-forn{width:100%;max-width:240px;font-size:11.5px}

/* Splitting: "+ outro fornecedor" under the product's last supplier (27/10/2026) */
.sq-forn-mais{display:block;margin:5px auto 0;border:1px dashed #c8956d;background:none;color:#7a5d1a;border-radius:6px;
  padding:2px 9px;font:600 11px var(--font-sans,system-ui);cursor:pointer}
.sq-forn-mais:hover{background:rgba(200,149,109,.12);border-style:solid}
td[data-sq-split-forn] select.sq-forn + select.sq-forn{margin-top:5px}
/* Splitting / Estimating grid (27/10/2026, Felipe): the lines of one product
   read as one group — a bold line between products, every other product on a
   light background, and a product with several lines gets a bar on the left
   and its repeated part number / description / qty dimmed after the first */
html.qmob-scope tbody.sup-inline{border-top:2.5px solid #1a1f2e !important}
html.qmob-scope tbody.sup-inline:nth-of-type(even) > tr > td{background:rgba(127,127,127,.055)}
html.qmob-scope tbody.sup-inline:has(> tr + tr) > tr > td:first-child{box-shadow:inset 4px 0 0 #c8956d}
html.qmob-scope tbody.sup-inline > tr + tr > td:nth-child(2),
html.qmob-scope tbody.sup-inline > tr + tr > td:nth-child(3),
html.qmob-scope tbody.sup-inline > tr + tr > td:nth-child(4){opacity:.35}
html.qmob-scope tbody.sup-inline > tr + tr > td{border-top:1px dashed var(--border,#e2dfd5)}

/* Splitting: the Part Number cell shows one code at a time (27/10/2026) */
.sq-cod-oe,.sq-cod-fab{display:none}
table.sq-cod-1 .sq-cod-pn,table.sq-cod-2 .sq-cod-pn{display:none}
table.sq-cod-1 .sq-cod-oe,table.sq-cod-2 .sq-cod-fab{display:inline}
html.sq-travado [data-sq-cod]{pointer-events:auto !important}

/* Splitting (27/10/2026): the CNPJ is a select as the Supplier (no magnifier),
   and the whole grid fits the card */
html.qmob-scope td select.cnpj-select{display:inline-block !important;width:100%;max-width:100%;font-size:11.5px}
html.qmob-scope td:has(> select.cnpj-select) [data-cnpj-display]{display:none !important}
html.qmob-scope tbody.sup-inline td{padding-left:4px;padding-right:4px}
html.qmob-scope tbody.sup-inline .actionwrp{gap:4px;justify-content:center}

/* the small return arrow under Building (Splitting → Building, 27/10/2026): on the light green segment */
.cx-ruler-seg--done .cx-ruler-mv.sq-voltar-b{background:rgba(46,125,79,.14);color:#2e7d4f}
.cx-ruler-seg--done .cx-ruler-mv.sq-voltar-b:hover{background:#2e7d4f;color:#fff}

/* By client minicard (27/10/2026): the Kanban miniature's information, compact */
.sq-mc .sq-bb--mini{margin:0 0 4px;gap:6px}
.sq-mc .sq-bb--mini .sq-bb-barra{height:5px}
.sq-mc .sq-bb--mini .sq-bb-num{font-size:10px}
.sq-mc .sq-bb--mini .sq-bb-num b{font-size:12px}
.sq-mc-sinais{display:inline-flex;align-items:center;gap:5px}
.sq-mc-chat{position:relative;font-size:12px;line-height:1}
.sq-mc-chat b{position:absolute;top:-6px;right:-8px;min-width:13px;height:13px;padding:0 3px;border-radius:7px;background:#d93025;
  color:#fff !important;font:700 8.5px/13px var(--font-sans,system-ui);text-align:center}
.sq-mc-check{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;color:#fff !important;font-size:10px;font-weight:800;line-height:1}
.sq-mc-check--verde{background:#2f8a4f}
.sq-mc-check--amarelo{background:var(--accent,#a67550)}
.sq-mc-sub{font-size:10.5px;color:var(--text-2,#8a8780);margin:1px 0 3px}
.sq-mc-ret{font-size:10px;font-weight:600;color:#8a5a00;margin:0 0 3px}
.sq-mc-data{font-family:var(--font-mono,monospace);font-size:10px;color:var(--text-2,#8a8780)}
.sq-mc-meta{align-items:center}
.sq-mc .sq-pdf .cg-fico{width:15px;height:18px;flex-basis:15px}
.sq-mc .sq-pdf .cg-fico b{font-size:5px;margin-top:3px}
.sq-board .sq-col--fim .sq-mc .sq-pdf:not(.sq-xls) .cg-fico,.sq-board .sq-col--fim .sq-mc .sq-pdf:not(.sq-xls) .cg-fico *{color:#c0392b !important}
.sq-board .cm-col--espera .sq-mc .sq-xls .cg-fico,.sq-board .cm-col--espera .sq-mc .sq-xls .cg-fico *{color:#1e8449 !important}
.sq-board .cm-col--espera .sq-mc .sq-mc-check--verde{background:#2f8a4f !important}
.sq-board .cm-col--espera .sq-mc .sq-mc-check--amarelo{background:var(--accent,#a67550) !important}

/* Estimating: the totals row above the header (27/10/2026) */
tr.sq-totais th{background:#f2efe6;border-bottom:1px solid var(--border,#e2dfd5);font-weight:400;padding-top:5px;padding-bottom:5px}
.sq-tot{font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;color:var(--ink,#1a1f2e);text-transform:none;letter-spacing:0;white-space:nowrap}
.sq-tot-rot{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2,#8a8780)}

tr.sq-totais th{padding-left:2px !important;padding-right:2px !important}
tr.sq-totais .sq-tot{font-size:10px}

/* the estimate in numbers on the miniature (27/10/2026): the fee stands out */
.sq-res{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 2px}
.sq-res i{font-style:normal;font-family:var(--font-mono,monospace);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;margin-right:4px}
.sq-res-it{font-family:var(--font-mono,monospace);font-size:10.5px;white-space:nowrap}
.sq-res-fee{display:inline-flex;align-items:baseline;padding:2px 7px;border-radius:5px;background:#2f8a4f;color:#fff !important;
  font:700 13px var(--font-sans,system-ui);white-space:nowrap}
.sq-res-fee i{color:#e3f3e8 !important}
.sq-board .sq-col--fim .sq-card .sq-res-fee,.sq-board .sq-col--fim .sq-card .sq-res-fee *{color:#fff !important}
.sq-board .sq-col--fim .sq-card .sq-res-fee i{color:#e3f3e8 !important}

/* "novo" in Concluded (27/10/2026): a red badge on the corner until hovered */
.sq-novo-badge{position:absolute;top:-7px;right:10px;z-index:4;padding:1px 7px;border-radius:9px;background:#d93025;color:#fff !important;
  font:700 9.5px/15px var(--font-sans,system-ui);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 0 0 2px #fff}
.sq-novo-badge[hidden]{display:none}
.sq-card:has(.sq-novo-badge){position:relative;overflow:visible}

/* Concluded: the proposals inline, one under the other (27/10/2026) */
.sq-props{margin:0 0 14px}
.sq-props-cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px}
.sq-props-cab b{font-size:13px}
.sq-props-menu{display:flex;flex-wrap:wrap;gap:6px}
.sq-props-menu a{padding:4px 10px;border:1px solid var(--border,#e2dfd5);border-radius:14px;background:var(--surface,#fff);font-size:11.5px;
  color:var(--ink,#1a1f2e);text-decoration:none;white-space:nowrap}
.sq-props-menu a:hover{border-color:#c0392b;color:#c0392b}
.sq-prop{margin:0 0 14px;border:1px solid var(--border,#e2dfd5);border-radius:8px;overflow:hidden;background:#fff;scroll-margin-top:10px}
.sq-prop-tit{display:flex;justify-content:space-between;padding:7px 12px;font-size:12px;font-weight:700;background:#f2efe6;border-bottom:1px solid var(--border,#e2dfd5)}
.sq-prop-tit a{text-decoration:none;color:var(--text-2,#8a8780)}
.sq-prop iframe{display:block;width:100%;height:900px;border:0}
.sq-props-vazio{padding:12px 14px;border:1px dashed var(--border,#d6d2c6);border-radius:8px;font-size:12px;color:var(--text-2,#8a8780)}

.sq-props-menu button{padding:4px 10px;border:1px solid var(--border,#e2dfd5);border-radius:14px;background:var(--surface,#fff);font:inherit;font-size:11.5px;
  color:var(--ink,#1a1f2e);white-space:nowrap;cursor:pointer}
.sq-props-menu button:hover{border-color:#c0392b;color:#c0392b}
html.sq-travado [data-sq-prop-ir]{pointer-events:auto !important}

/* the card's bottom in Concluded: Reject and Approve (27/10/2026) */
.sq-rodape{gap:8px}
.sq-aprovar{border:1px solid #7a5d1a;background:#7a5d1a;color:#fff;border-radius:6px;padding:6px 14px;font:600 12px var(--font-sans,system-ui);cursor:pointer}
.sq-aprovar:hover{background:#5f4813}

/* back to the top of the proposals, next to each CNPJ (27/10/2026) */
.sq-prop-tit span{display:inline-flex;align-items:center;gap:6px}
.sq-prop-topo{display:inline-grid;place-items:center;border:0;background:none;padding:0;color:#1a73e8;cursor:pointer;line-height:0}
.sq-prop-topo:hover{color:#0b57d0}
#sq-props-topo{scroll-margin-top:10px}
html.qmob-scope .sq-prop-tit .sq-prop-topo{color:#1a73e8 !important;background:none !important;border:0 !important}
html.qmob-scope .sq-prop-tit .sq-prop-topo:hover{color:#0b57d0 !important}

/* the payment method in the card's top, beside "Maior lead time" (27/10/2026) */
.cx-gfields.sq-gfields:has(.sq-pag){grid-template-columns:repeat(4,minmax(0,1fr))}
.sq-pag-linha{display:flex;align-items:center;gap:6px;min-width:0}
.sq-pag-linha select{flex:1 1 auto;min-width:0;min-height:30px;cursor:pointer}
.sq-pag-custom{display:inline-flex;align-items:center;gap:3px;color:var(--text-2,#8a8780)}
.sq-pag-custom[hidden]{display:none}
.sq-pag-custom input{width:42px;min-height:30px;padding:0 4px;text-align:center}
.sq-pag--vazio .cx-flabel{color:#c0392b}
.sq-pag--vazio select{border-color:#c0392b !important;background:#fdecea !important;color:#c0392b;font-weight:600}
.sq-props-pag{border-color:#e8b4ae;background:#fdf3f2;color:#a93226}

/* Master data: a download button (27/10/2026, Felipe) */
html .sq-barra .sq-btn-dl,html.qmob-scope :is(main.content,.topbar-actions) .sq-barra .sq-btn-dl{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid var(--accent,#a67550);border-radius:6px;background:var(--surface,#fff);color:var(--accent,#a67550);font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
html .sq-barra .sq-btn-dl:hover,html.qmob-scope :is(main.content,.topbar-actions) .sq-barra .sq-btn-dl:hover{background:var(--accent,#a67550);color:#fff}
html .sq-barra .sq-btn-dl svg,html.qmob-scope :is(main.content,.topbar-actions) .sq-barra .sq-btn-dl svg{flex:0 0 auto}

/* Billing document preview: same chrome as Approve sourcing. Served here so qmob.css is not rebuilt. */
html.qmob-scope :is(main.content,.topbar-actions) i.w20-eye{mask-image:url('icon/eye-20.svg');-webkit-mask-image:url('icon/eye-20.svg')}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal.supplier-remove-modal{position:fixed !important;inset:0 !important;z-index:9200 !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:16px !important;pointer-events:none !important;opacity:0 !important;transition:opacity .15s ease !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal.supplier-remove-modal[aria-hidden="false"]{pointer-events:auto !important;opacity:1 !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__backdrop{position:absolute !important;inset:0 !important;background:rgba(26,31,46,.5) !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__dialog{position:relative !important;z-index:1 !important;display:flex !important;flex-direction:column !important;width:100% !important;max-width:min(97vw,900px) !important;height:90vh !important;max-height:90vh !important;background:var(--column-bg) !important;border-radius:4px !important;box-shadow:var(--shadow-modal) !important;overflow:hidden !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__header{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;padding:14px 16px !important;border-bottom:1px solid var(--card-border) !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__title{margin:0 !important;font-family:var(--font-title) !important;font-size:16px !important;font-weight:700 !important;letter-spacing:.2px !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__close{background:none !important;border:none !important;font-size:24px !important;cursor:pointer !important;padding:0 6px !important;line-height:1 !important;color:var(--text-secondary) !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__body{flex:1 1 auto !important;min-height:0 !important;padding:0 !important;font-size:13px !important;line-height:1.45 !important;color:var(--text-primary) !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__body iframe{display:block !important;width:100% !important;height:100% !important;border:0 !important}
html.qmob-scope :is(main.content,.topbar-actions) #billingPreviewModal .supplier-remove-modal__footer{flex-shrink:0 !important;display:flex !important;justify-content:flex-end !important;gap:8px !important;padding:12px 14px !important;border-top:1px solid var(--card-border) !important;background:var(--column-bg) !important}