/* ==========================================================================
   Tela de lançamento de consumo (/lancamentos)

   POR QUE ESTE ARQUIVO EXISTE: o markup desta tela repetia
   `style="background: var(--occ-surface); box-shadow: var(--occ-shadow);
   border-radius: var(--occ-radius);"` em cada card, e mais uma dúzia de
   declarações soltas em atributo. Regra em atributo não é sobrescrevível,
   não responde ao tema e não se corrige num lugar só.

   Tudo aqui usa os tokens de tokens.css — nenhuma cor literal, para o tema
   escuro continuar valendo. Escopado em `#lancamentos-container` para não
   vazar para as outras telas que também são `.cad-premium`.
   ========================================================================== */

#lancamentos-container .lanc-card {
	background: var(--occ-surface);
	box-shadow: var(--occ-shadow);
	border-radius: var(--occ-radius);
	border: 0;
}

#lancamentos-container .lanc-card-head {
	background-color: transparent;
	border-bottom: 1px solid var(--occ-line);
	padding: var(--occ-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* --- KPIs ---------------------------------------------------------------- */

#lancamentos-container .lanc-kpi-icon {
	margin-left: var(--occ-space-3);
	padding: var(--occ-space-3);
	border-radius: 50%;
	display: flex;
	background-color: var(--occ-accent-soft);
}

#lancamentos-container .lanc-kpi-icon i {
	color: var(--occ-accent);
}

#lancamentos-container .lanc-kpi-icon--pagamento { background-color: var(--st-confirmada-soft); }
#lancamentos-container .lanc-kpi-icon--pagamento i { color: var(--st-confirmada); }
#lancamentos-container .lanc-kpi-icon--estorno { background-color: var(--occ-danger-soft); }
#lancamentos-container .lanc-kpi-icon--estorno i { color: var(--occ-danger); }
#lancamentos-container .lanc-kpi-icon--saldo { background-color: var(--st-reserva-soft); }
#lancamentos-container .lanc-kpi-icon--saldo i { color: var(--st-reserva); }

/* --- Formulário ---------------------------------------------------------- */

#lancamentos-container .lanc-form-card {
	position: sticky;
	top: var(--occ-space-3);
}

/* --- Área de trabalho: feed + formulário ---------------------------------

   Grid em vez de `row`/`col-*`. O motivo é a animação: quando o card de lançamento abre, a
   coluna dele precisa de espaço que o feed ainda está devolvendo, e um container flex quebra
   a linha nesse intervalo — o formulário caía embaixo do feed e saltava para o lado ao fim da
   transição. Grid tem faixas fixas: elas encolhem e crescem, nunca empilham.

   `1fr 0fr` é a mesma técnica do rodapé retrátil (footer.css), lá em grid-template-rows. */

#lancamentos-container .lanc-workspace {
	display: grid;
	gap: 1rem;                 /* mesmo gutter do `row g-3` dos KPIs, acima */
	grid-template-columns: 1fr; /* abaixo de lg as duas empilham, como antes */
}

/* min-width: 0 é obrigatório: item de grid tem min-width auto e a tabela do feed
   (text-nowrap) esticaria a faixa além do 2fr, estourando a largura da página. */
#lancamentos-container .lanc-workspace > * {
	min-width: 0;
}

@media (min-width: 992px) {
	#lancamentos-container .lanc-workspace {
		grid-template-columns: 2fr 1fr;
		/* .35s = duração do collapse do Bootstrap: as duas animações terminam juntas e leem
		   como um movimento só. */
		transition: grid-template-columns .35s var(--occ-ease);
	}

	#lancamentos-container .lanc-workspace[data-form-fechado="true"] {
		grid-template-columns: 1fr 0fr;
	}

	/* Com a faixa em 0fr o conteúdo ainda tem largura própria; sem isto ele vazaria por cima
	   do feed durante a animação. O card em si já sai do fluxo pelo collapse do Bootstrap. */
	#lancamentos-container .lanc-workspace[data-form-fechado="true"] > #col-form {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	#lancamentos-container .lanc-workspace { transition: none; }
}

#lancamentos-container .lanc-filtros {
	background: var(--occ-surface-2);
	border-radius: var(--occ-radius-sm);
	padding: var(--occ-space-2);
}

/* Campo que só aparece quando o PDV pede (pede_mesa / pede_cartao_consumo).
   `hidden` sozinho perde para o `display:flex` do .row do Bootstrap. */
#lancamentos-container [data-lanc-condicional][hidden] {
	display: none !important;
}

#lancamentos-container .lanc-total {
	background: var(--occ-surface-2);
	border-left: 4px solid var(--occ-accent);
	border-radius: var(--occ-radius-sm);
	padding: var(--occ-space-3);
}

#lancamentos-container .lanc-total-valor {
	color: var(--occ-accent);
}

#lancamentos-container .lanc-total-linha {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

/* `display:flex` acima vence o `[hidden]{display:none}` da folha do navegador — sem esta
   regra a linha da taxa apareceria mesmo com o atributo hidden ligado pelo JS. */
#lancamentos-container .lanc-total-linha[hidden] {
	display: none;
}

/* --- Carrinho de itens --------------------------------------------------- */

#lancamentos-container .lanc-carrinho {
	border: 1px dashed var(--occ-line-strong);
	border-radius: var(--occ-radius-sm);
	padding: var(--occ-space-2);
}

#lancamentos-container .lanc-carrinho table {
	margin-bottom: 0;
}

#lancamentos-container .lanc-carrinho-vazio {
	color: var(--occ-ink-soft);
	text-align: center;
	padding: var(--occ-space-3) 0;
	margin: 0;
}

/* --- Feed ---------------------------------------------------------------- */

#lancamentos-container .lanc-uh-chip {
	background-color: var(--occ-surface-2);
	color: var(--occ-ink);
	font-weight: 600;
	font-size: var(--occ-fs-micro);
	border: 1px solid var(--occ-line-strong);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

#lancamentos-container .lanc-linha-estornada {
	opacity: .75;
	text-decoration: line-through;
	color: var(--occ-ink-soft);
}

/* A observação do operador é secundária à descrição do produto, mas não é
   decoração: fica na mesma célula, um degrau abaixo. */
#lancamentos-container .lanc-obs {
	display: block;
	font-size: var(--occ-fs-micro);
	color: var(--occ-ink-soft);
	margin-top: 2px;
}

#lancamentos-container .lanc-vazio {
	text-align: center;
	padding: var(--occ-space-5) 0;
	color: var(--occ-ink-soft);
}

#lancamentos-container .lanc-vazio i {
	opacity: .5;
	display: block;
	margin-bottom: var(--occ-space-2);
}

/* --- Drawer de correção -------------------------------------------------- */

.occ-lanc-drawer {
	width: 480px;
	background: var(--occ-surface);
	box-shadow: var(--occ-shadow);
}

.occ-lanc-drawer .offcanvas-header {
	border-bottom: 1px solid var(--occ-line);
}

.occ-lanc-drawer .lanc-original {
	background-color: var(--occ-surface-2);
	border-left: 4px solid var(--occ-ink-soft);
	border-radius: var(--occ-radius-sm);
	padding: var(--occ-space-3);
}

@media (max-width: 575.98px) {
	.occ-lanc-drawer { width: 100%; }
}