/* Vendas balcão: lista e tela de venda rápida. Medidas tiradas de vendas-balcao.png e de
   pedidos-vendas-vendas_balcao-adicionar-tela (1440 de largura, 1 px de tela = 1 px de CSS). */

/* ---- Lista ---- */
.counter-sale-list .counter-sale-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.counter-sale-list .counter-sale-toolbar-left, .counter-sale-list .counter-sale-toolbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.counter-sale-list .counter-sale-sell { display: inline-flex; align-items: center; gap: 6px; height: 37px; background: #0f1921; border-color: #0f1921; color: #fff; }
.counter-sale-list .counter-sale-sell .counter-sale-icon { width: 16px; height: 16px; fill: currentColor; }
.counter-sale-list .counter-sale-more { height: 37px; box-sizing: border-box; border: 1px solid #0f1921; background: #fff; color: #0f1921; font-size: 16px; }
.counter-sale-list .counter-sale-more:disabled { opacity: 1; cursor: not-allowed; }
.counter-sale-list .counter-sale-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 37px; min-width: 42px; padding: 0 12px; box-sizing: border-box;
  border: 1px solid #0f1921; border-radius: 3px; background: #0f1921; color: #fff;
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.counter-sale-list .counter-sale-tool .counter-sale-icon { width: 17px; height: 17px; fill: currentColor; }
.counter-sale-list .counter-sale-tool.is-light { background: #fff; border-color: #d9dee2; color: #0f1921; }
.counter-sale-list .counter-sale-tool:disabled { cursor: not-allowed; opacity: .85; }
.counter-sale-list .counter-sale-month { padding: 0 16px; }
.counter-sale-list .counter-sale-panel { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px solid #d9dee2; border-radius: 4px; background: #fff; }
.counter-sale-list .counter-sale-panel[hidden] { display: none; }
.counter-sale-list .data-table td.money-cell, .counter-sale-list .data-table th:last-child { text-align: right; }

.counter-sale-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 16px 28px; border: 1px solid #d9dee2; border-radius: 4px; background: #fff; text-align: center;
}
.counter-sale-empty-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #f1f2f4; margin-bottom: 8px; }
.counter-sale-empty-icon .counter-sale-icon { width: 30px; height: 30px; fill: #3b4249; }
.counter-sale-empty h2 { margin: 0; font-size: 18px; font-weight: 600; color: #1d2328; }
.counter-sale-empty p { margin: 0; font-size: 12px; color: #6e757c; }
.counter-sale-empty-actions { display: flex; gap: 8px; margin-top: 12px; }
.counter-sale-empty-actions .button { display: inline-flex; align-items: center; gap: 6px; }
.counter-sale-empty-actions .counter-sale-icon { width: 15px; height: 15px; fill: currentColor; }

/* ---- Tela de venda (PDV) ---- */
body:has(.counter-pdv) .topbar { display: none; }
body:has(.counter-pdv) .app-shell { grid-template-columns: minmax(0, 1fr); }
body:has(.counter-pdv) .sidebar { display: none; }
body:has(.counter-pdv) main { background: #f6f6f6; }
/* No original o cabeçalho do PDV só tem o botão Sair do PDV, o sino e a conta. */
body:has(.counter-pdv) [aria-label^="Aplicativos"], body:has(.counter-pdv) [aria-label^="Assistente"], body:has(.counter-pdv) [aria-label^="Agenda"] { display: none; }

.counter-pdv { position: relative; box-sizing: border-box; max-width: 1298px; margin: 0 auto; padding: 1px 16px 24px; }
.counter-pdv kbd {
  display: inline-block; padding: 1px 5px; border: 1px solid #aeb4ba; border-radius: 3px;
  background: #fff; color: #3b4249; font-family: inherit; font-size: 10px; font-weight: 600; line-height: 15px;
}
.counter-pdv-searchbox kbd, .counter-sale-add kbd, .counter-sale-finalize kbd { padding: 0 6px; line-height: 16px; }
.counter-pdv-bar { position: fixed; top: 0; right: 104px; z-index: 40; height: 50px; display: flex; align-items: center; }
.counter-pdv-exit {
  display: inline-flex; align-items: center; gap: 5px; height: 25px; padding: 0 5px; border-radius: 3px;
  background: #4b555b; color: #fff; font-size: 12px; text-decoration: none;
}
.counter-pdv-exit .counter-sale-icon { width: 11px; height: 11px; fill: currentColor; }
.counter-pdv-grid { display: grid; grid-template-columns: minmax(0, 833fr) minmax(0, 402fr); gap: 31px; align-items: stretch; }
.counter-pdv-card { border: 1px solid #d9dee2; border-radius: 4px; background: #fff; }

.counter-pdv-search { min-height: 721px; }
.counter-pdv-search > header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 20px; min-height: 70px; box-sizing: border-box; background: #f6f6f6; border-bottom: 1px solid #d9dee2;
}
.counter-pdv-search h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; color: #1d2328; }
.counter-pdv-search header p { margin: 0; font-size: 11px; color: #6e757c; }
.counter-pdv-ops { height: 24px; padding: 0 10px; border: 1px solid #0f1921; border-radius: 3px; background: #fff; color: #0f1921; font-size: 11px; cursor: not-allowed; }
.counter-pdv-body { padding: 20px; }
.counter-pdv-searchbox {
  position: relative; display: flex; align-items: center; gap: 10px; height: 44px; box-sizing: border-box;
  padding: 0 12px; border: 1px solid #d9dee2; border-radius: 4px; background: #fff;
}
.counter-pdv-searchbox .counter-sale-icon { width: 18px; height: 18px; fill: #6e757c; flex: none; }
.counter-pdv-searchbox input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; }
.counter-sale-suggest {
  position: absolute; left: -1px; right: -1px; top: 100%; z-index: 20; margin: 2px 0 0; padding: 4px; list-style: none;
  border: 1px solid #d9dee2; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(15, 25, 33, .16);
}
.counter-sale-suggest[hidden] { display: none; }
.counter-sale-suggest button { display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.counter-sale-suggest button:hover, .counter-sale-suggest button:focus { background: #f1f2f4; }
.counter-sale-suggest small { color: #6e757c; }

.counter-pdv-line { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 31px; margin-top: 16px; }
.counter-sale-photo { height: 244px; background: #dcdcdc; border-radius: 3px; position: relative; }
.counter-sale-photo::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 110px; height: 98px; transform: translate(-50%, -50%);
  background: #f2f2f2; border-radius: 6px;
}
.counter-pdv-fields { display: flex; flex-direction: column; gap: 10px; }
.counter-pdv-fields .counter-pdv-field { display: grid; grid-template-columns: 127px minmax(0, 1fr); align-items: center; gap: 0; font-size: 13px; color: #6e757c; }
.counter-pdv-fields .counter-pdv-field.is-total > span { color: #1d2328; font-weight: 600; }
.counter-pdv-fields input, .counter-pdv-fields select {
  height: 44px; box-sizing: border-box; width: 100%; padding: 0 12px; border: 1px solid #d9dee2; border-radius: 3px;
  background: #fff; color: #1d2328; font-size: 15px;
}
.counter-pdv-fields input:disabled, .counter-pdv-fields select:disabled { background: #e6e9ec; cursor: not-allowed; }
.counter-pdv-addon { display: flex; }
.counter-pdv-addon input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.counter-pdv-addon select {
  width: 59px; flex: none; padding: 0 22px 0 12px; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0;
  appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 1 9 6H1zM5 13 1 8h8z' fill='%23222529'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 13px;
}
.counter-pdv-addon select:disabled { background-color: #fff; }
.counter-sale-add {
  display: flex; align-items: center; gap: 12px; height: 52px; margin-left: 127px; margin-top: 7px; padding: 0 16px; border: 0; border-radius: 4px;
  background: #0f1921; color: #fff; font-size: 20px; cursor: pointer; text-align: left;
}
.counter-sale-add span { flex: 1; }
.counter-sale-add:disabled { cursor: default; }
.counter-sale-add .counter-sale-icon { width: 19px; height: 19px; fill: currentColor; }
.counter-sale-add kbd { background: transparent; color: #fff; border-color: #8b949b; }

.counter-pdv-side { display: flex; flex-direction: column; gap: 17px; }
.counter-pdv-parties { position: relative; display: flex; gap: 30px; padding: 10px 14px; min-height: 64px; box-sizing: border-box; align-items: center; }
.counter-sale-party { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font: inherit; color: #1d2328; }
.counter-sale-party-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e9ecee; }
.counter-sale-party-icon .counter-sale-icon { width: 11px; height: 11px; fill: #3b4249; }
.counter-sale-party small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6e757c; }
.counter-sale-party strong { font-size: 15px; font-weight: 600; }
.counter-pdv .counter-sale-party kbd { font-size: 10px; line-height: 13px; }
.counter-sale-pop-host { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; }
.counter-sale-pop { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding: 10px; border: 1px solid #d9dee2; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(15, 25, 33, .16); }

.counter-pdv-cart { flex: 1; min-height: 380px; display: flex; }
.counter-pdv-parties { background: #fff; }
.counter-sale-cart-body { flex: 1; display: flex; }
.counter-sale-cart-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.counter-sale-cart-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #f1f2f4; margin-bottom: 16px; }
.counter-sale-cart-icon .counter-sale-icon { width: 28px; height: 28px; fill: #0f1921; }
.counter-sale-cart-empty h3 { margin: 0; font-size: 15px; font-weight: 600; }
.counter-sale-cart-empty p { margin: 0; font-size: 13px; color: #6e757c; }
.counter-sale-cart-lines { flex: 1; margin: 0; padding: 0; list-style: none; align-self: flex-start; }
.counter-sale-cart-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eceef0; font-size: 13px; }
.counter-sale-cart-lines small { display: block; color: #6e757c; font-size: 11px; }
.counter-sale-remove { width: 24px; height: 24px; border: 1px solid #d9dee2; border-radius: 3px; background: #fff; cursor: pointer; line-height: 1; }

.counter-pdv-totals { padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; }
.counter-sale-total { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 48px; border-radius: 4px; background: #f6f6f6; font-size: 15px; }
.counter-sale-total-money { display: inline-flex; align-items: flex-start; gap: 3px; font-size: 28px; font-weight: 600; }
.counter-sale-total-money small { font-size: 12px; font-weight: 400; padding-top: 2px; color: #6e757c; }
.counter-sale-total-money output { font: inherit; }
.counter-sale-finalize-group { display: flex; }
.counter-sale-finalize {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; border: 0; border-radius: 4px 0 0 4px;
  background: #0f1921; color: #fff; font-size: 19px; font-weight: 600; cursor: pointer; text-align: left;
}
.counter-sale-finalize span { flex: 1; }
.counter-sale-finalize .counter-sale-icon { width: 19px; height: 19px; fill: currentColor; }
.counter-sale-finalize kbd { background: transparent; color: #fff; border-color: #8b949b; }
.counter-sale-finalize-more { width: 40px; height: 52px; border: 0; border-left: 1px solid #3b4249; border-radius: 0 4px 4px 0; background: #0f1921; color: #fff; cursor: not-allowed; }

.counter-pdv-shortcuts {
  display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 45px; padding: 10px 12px; border: 1px solid #d9dee2; border-radius: 4px; background: #fff; font-size: 14px; color: #4a5056;
}
.counter-pdv-shortcuts span { display: inline-flex; align-items: center; gap: 6px; }
.counter-pdv .counter-pdv-shortcuts kbd { padding: 2px 7px; border-color: #d9dee2; background: #f6f6f6; color: #222529; font-size: 11px; line-height: 15px; }

.counter-sale-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(15, 25, 33, .45); }
.counter-sale-modal-card { display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); padding: 20px; border-radius: 4px; background: #fff; }
.counter-sale-modal-card h2 { margin: 0; font-size: 18px; }
.counter-sale-modal-card p { margin: 0 0 6px; color: #4a5056; }
.counter-sale-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

@media (max-width: 900px) {
  .counter-pdv-grid { grid-template-columns: minmax(0, 1fr); }
  .counter-pdv-line { grid-template-columns: minmax(0, 1fr); }
  .counter-sale-photo { display: none; }
  .counter-sale-add { margin-left: 0; }
}

.counter-sale-party-link { color: inherit; text-decoration: none; cursor: pointer; }

/* Ícone do título das listas (o original traz um ícone antes do nome da tela). */
#page-title[data-route='sales-counter'][data-mode='list']::before { content: ''; display: inline-block; width: 24px; height: 24px; margin-right: 4px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23262b2f'%3E%3Cpath d='M20 18c1.1 0 1.99-.9 1.99-2L22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Leva 7, tema X1: medidas do PDV conferidas contra o original (1440 x 900).
   Campos do produto com 44 px e passo de 54 px (gap de 10); seletor com #view-root para valer sobre o 38 px global. */
#view-root .counter-pdv-fields { gap: 10px; }
#view-root .counter-pdv-fields input, #view-root .counter-pdv-fields select { height: 44px; min-height: 44px; }
#view-root .counter-pdv-search { min-height: 722px; }
/* Área da foto: ilustração cinza de imagem (sol e montanhas) dentro do quadro claro, como no original. */
.counter-sale-photo::after {
  width: 110px; height: 98px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='98' viewBox='0 0 110 98'%3E%3Crect width='110' height='98' rx='9' fill='%23f6f6f6'/%3E%3Crect x='9' y='9' width='92' height='80' rx='2' fill='%23dcdcdc'/%3E%3Ccircle cx='28' cy='30' r='11' fill='%23f6f6f6'/%3E%3Cpath d='M9 89V71l22-18 17 14 22-27 31 28v21z' fill='%23f6f6f6'/%3E%3Cpath d='M9 89V80l22-18 17 14 22-27 31 28v12z' fill='%23ededed'/%3E%3C/svg%3E") center / 110px 98px no-repeat;
}
/* Botão Operações: 90 px de largura, engrenagem de 12 px, 11 px mais abaixo no cabeçalho (original y 94 a 118). */
#view-root .counter-pdv-ops {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box;
  width: 90px; height: 24px; margin-top: 11px; padding: 0 8px; font-size: 11px; line-height: 1; white-space: nowrap;
}
.counter-pdv-ops .counter-sale-icon { width: 13px; height: 13px; fill: currentColor; flex: none; }
/* Busca: ícone de código de barras maior e texto de 16 px (original: ícone em x 124, texto em x 153). */
.counter-pdv-searchbox { gap: 8px; padding-left: 12px; }
.counter-pdv-searchbox .counter-sale-icon { width: 24px; height: 24px; fill: #6e757c; margin-left: -1px; }
.counter-pdv-searchbox input { font-size: 16px; }
/* Cliente e Vendedor: círculo de 22 px com ícone maior, rótulo e nome mais juntos do ícone. */
.counter-pdv-parties { gap: 24px; padding: 10px 12px; min-height: 64px; }
.counter-sale-party { gap: 6px; }
.counter-sale-party-icon .counter-sale-icon { width: 14px; height: 14px; fill: #343a40; }
.counter-sale-party-link { display: block; margin-top: 2px; }
/* Estado vazio do carrinho: cesta de 34 px; o bloco todo fica 5 px mais abaixo e o título mais perto do círculo. */
.counter-sale-cart-icon { margin-bottom: 7px; }
.counter-sale-cart-icon .counter-sale-icon { width: 34px; height: 34px; }
.counter-sale-cart-empty { gap: 4px; padding-bottom: 2px; }
/* Atalhos do rodapé: 44 px de altura. */
.counter-pdv-shortcuts { min-height: 44px; box-sizing: border-box; }