/* ============================================================================
   componentes.css — layout da tela "Componentes" (runtime/src/ScreenComponentes.pas)

   A pagina de referencia do D2PdvSmart (wwwroot/demo.html) era escrita em
   utilitarias do Tailwind (bg-white, dark:bg-gray-800, rounded-2xl,
   sm:grid-cols-2...). O tailwind.min.css deste projeto e um subconjunto
   enxuto e nao tem essas classes, e puxar o Tailwind inteiro so por causa de
   uma tela nao se paga. Entao a ESTRUTURA (cartao de secao + grade) mora
   aqui, em tokens do tema, e os COMPONENTES continuam sendo os arquivos
   copiados sem alteracao de
   D2PdvSmart\Web\wwwroot\src\css\components\.
   ============================================================================ */

.comp-intro {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0 0 1.1rem;
  max-width: 70ch;
}

.comp-secao {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg, .9rem);
  padding: 1.15rem 1.25rem 1.35rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}

.comp-secao > h3 {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.comp-secao > .comp-sub {
  margin: 0 0 1.1rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* Caminho do arquivo de origem, para quem for copiar o componente. */
.comp-fonte {
  display: inline-block;
  margin-top: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: .4rem;
  padding: .15rem .45rem;
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.25rem;
}
.comp-grid.uma { grid-template-columns: minmax(0, 1fr); }
.comp-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .comp-grid,
  .comp-grid.tres { grid-template-columns: minmax(0, 1fr); }
}

/* Linha "valor numerico: 1234.56" abaixo das mascaras. */
.comp-eco {
  margin: .5rem 0 0;
  font-size: .72rem;
  color: var(--text-muted);
}
.comp-eco code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--primary);
}

/* Vitrine de botoes / badges do proprio shell. */
.comp-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.comp-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  border-radius: var(--radius, .6rem);
  padding: .45rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.comp-btn:hover { background: var(--primary-soft); color: var(--primary); }
.comp-btn.primario {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-contrast, #1a1a1a);
}
.comp-btn.primario:hover { background: var(--primary-hover); color: var(--primary-contrast, #1a1a1a); }
.comp-btn.perigo {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.comp-btn:disabled { opacity: .5; cursor: not-allowed; }

.comp-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}
.comp-badge.ok    { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.comp-badge.warn  { background: color-mix(in srgb, var(--warning) 20%, transparent); color: var(--warning); }
.comp-badge.erro  { background: color-mix(in srgb, var(--danger) 18%, transparent);  color: var(--danger); }
.comp-badge.info  { background: color-mix(in srgb, var(--info) 18%, transparent);    color: var(--info); }

/* Paleta do tema em uso — util para conferir contraste ao criar um preset. */
.comp-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .6rem;
}
.comp-swatch {
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .6rem);
  overflow: hidden;
  font-size: .68rem;
}
.comp-swatch span { display: block; height: 42px; }
.comp-swatch small {
  display: block;
  padding: .3rem .45rem;
  color: var(--text-muted);
  background: var(--card-bg);
}

/* O <filtro-data> e um custom element: sem largura propria ele encolhe. */
.comp-secao filtro-data,
.comp-secao filtro-data-nativo { display: block; }

/* ============================================================================
   Pills de status (grupo de radio) — copiado de
   D2PdvSmart\Web\wwwroot\src\css\pages\demo.css.

   Vem so este trecho: o restante daquele arquivo (.spark, .data-row, .badge)
   e de outra tela, e o `.badge` de la colidiria com o `.badge` que este shell
   ja usa no indicador de conexao da topbar (#conn-status).
   ============================================================================ */

/* ===== STATUS ATENDIMENTO - PILLS RADIO GROUP ===== */
.status-caption {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 10px;
}

.status-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}

.status-wrap .pill-check {
  margin: 0;
  padding: 0;
  width: 100%;
}

.status-wrap .pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0.7;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.status-wrap .pill:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.status-wrap .pill-check-input {
  display: none;
}

.status-wrap .pill-check-input:checked + span {
  font-weight: 600;
}

.status-wrap .pill-check-input:checked ~ span::before {
  content: '✓ ';
}

.status-wrap label:has(input:checked) {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

@media (max-width: 576px) {
  .status-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .status-wrap .pill {
    padding: 8px 10px;
    font-size: 11px;
  }
}

/* ============================================================================
   Compatibilidade dos autocompletes (filtro-produto.js / filtro-cliente.js).

   Esses componentes montam o menu de resultados com utilitarias do Tailwind
   (px-3 py-2 text-sm border-gray-100 dark:bg-gray-700 ...) que este projeto
   nao carrega. Em vez de tocar no JS copiado, estilizamos o CONTAINER e as
   linhas por seletor de estrutura — o resultado fica no tema do sistema, e o
   componente segue sendo copia fiel do D2PdvSmart.
   ============================================================================ */

.filtro-produto-menu,
.filtro-cliente-menu,
.filtro-cedente-menu {
  background: var(--card-bg) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius, .6rem);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, .18));
  max-height: 16rem;
  overflow-y: auto;
  color: var(--text);
}

.filtro-produto-menu > div,
.filtro-cliente-menu > div,
.filtro-cedente-menu > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  font-size: .82rem;
  cursor: pointer;
  border-bottom: 1px solid var(--card-border);
}
.filtro-produto-menu > div:last-child,
.filtro-cliente-menu > div:last-child,
.filtro-cedente-menu > div:last-child { border-bottom: none; }

.filtro-produto-menu > div:hover,
.filtro-cliente-menu > div:hover,
.filtro-cedente-menu > div:hover { background: var(--primary-soft); }

/* Linha destacada pelas setas do teclado (o JS usa as classes do Tailwind). */
.filtro-produto-menu > div.bg-primary-50,
.filtro-cliente-menu > div.bg-primary-50,
.filtro-produto-menu > div.bg-gray-100,
.filtro-cliente-menu > div.bg-gray-100 { background: var(--primary-soft); }

.filtro-produto-menu .font-semibold,
.filtro-cliente-menu .font-semibold { font-weight: 700; }

.filtro-produto-menu .text-xs,
.filtro-cliente-menu .text-xs,
.filtro-produto-menu small,
.filtro-cliente-menu small {
  font-size: .72rem;
  color: var(--text-muted);
}

.filtro-produto-menu mark,
.filtro-cliente-menu mark {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
  color: inherit;
  border-radius: .2rem;
}