@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   ERP — Design System
   Visual limpo e moderno. Cor de destaque (índigo) usada com
   parcimônia: ações primárias, foco, links e estados ativos.
   ============================================================ */
:root {
	/* Cor de destaque */
	--accent:        #4f46e5;
	--accent-hover:  #4338ca;
	--accent-soft:   #eef2ff;
	--accent-ring:   rgba(79, 70, 229, 0.35);

	/* Semânticas */
	--success: #16a34a;  --success-soft: #dcfce7;
	--danger:  #dc2626;  --danger-soft:  #fee2e2;
	--warning: #d97706;  --warning-soft: #fef3c7;
	--info:    #2563eb;  --info-soft:    #dbeafe;

	/* Neutros */
	--bg:        #f3f4f6;
	--surface:   #ffffff;
	--surface-2: #f9fafb;
	--border:    #e5e7eb;
	--border-strong: #d1d5db;
	--text:      #111827;
	--text-muted:#6b7280;
	--text-label:#374151;

	/* Paleta das etapas de produção (cores coerentes e distintas por etapa) */
	--etapa-fornecimento: #0891b2; --etapa-fornecimento-soft: #cffafe;
	--etapa-corte:        #2563eb; --etapa-corte-soft:        #dbeafe;
	--etapa-costura:      #7c3aed; --etapa-costura-soft:      #ede9fe;
	--etapa-arte:         #db2777; --etapa-arte-soft:         #fce7f3;
	--etapa-acabamento:   #16a34a; --etapa-acabamento-soft:   #dcfce7;

	/* Forma */
	--radius:    10px;
	--radius-sm: 7px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
	--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
	--shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.22);

	--gap: 1rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
	transition: background .2s ease, color .2s ease;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.4rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; color: var(--text-muted); }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Cabeçalho da página + navegação ─────────────────────── */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: .9rem 1.5rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 10;
}
.page-header h1 { margin: 0; }

.produtos-nav { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.produtos-nav a,
.produtos-nav button {
	font: inherit;
	padding: .45rem .85rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.produtos-nav a:hover,
.produtos-nav button:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

main { display: block; max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
/* Páginas de gestão (form + trilhos de ação) ganham mais largura — a
   prioridade é o formulário; os trilhos ficam só com a largura dos botões. */
main:has(.manage) { max-width: 1480px; }

/* ── Cartões ─────────────────────────────────────────────── */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.list-header h3 { margin: 0; }
.toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Numa toolbar, label e botões não herdam as margens de formulário (que
   esticavam os itens via align-items:stretch) — todos alinham pela altura
   natural (ex.: botões na mesma altura do <select> ao lado). */
.toolbar label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; }
.toolbar label select { margin: 0; }
/* inclui [type=submit] p/ vencer "form button[type=submit] { margin-top }",
   senão Salvar/Finalizar descem 1.2rem e desalinham dos vizinhos. */
.toolbar button, .toolbar a, .toolbar button[type="submit"] { margin-top: 0; }

/* ── Layout de gestão: trilho esquerdo | formulário | trilho direito ──
   .manage flanqueia o formulário com trilhos verticais de ações.
   Esquerda = navegação (Novo / Buscar); direita = ações do registro
   (Salvar, Adicionar, Excluir…). Botões de sub-formulários (Selecionar
   cliente/modelo, Adicionar arte) permanecem no meio, dentro do card. */
.manage,
#pedidos-container,
#modelos-container,
#fichatec-container {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

/* Coluna central — o formulário ocupa o espaço restante. */
.manage-main { flex: 1; min-width: 0; }

/* Trilho vertical de ações. */
.action-rail {
	flex: 0 0 160px;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	position: sticky;
	top: 1.5rem;
}
.action-rail > button,
.action-rail > a { width: 100%; margin-top: 0; }
.action-rail .rail-sep { height: .25rem; }

/* Formulário + trilho direito de ações (dentro da coluna central). */
.form-with-actions { display: flex; gap: 1.5rem; align-items: flex-start; }
.form-with-actions > .card { flex: 1; min-width: 0; margin-bottom: 0; }

@media (max-width: 920px) {
	.manage,
	#pedidos-container,
	#modelos-container,
	#fichatec-container,
	.form-with-actions { flex-direction: column; }
	.action-rail {
		position: static;
		flex: none;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.action-rail > button, .action-rail > a { width: auto; }
}

/* ── Formulários ─────────────────────────────────────────── */
form label,
.card > label { display: block; font-weight: 500; margin: .85rem 0 .3rem; font-size: .85rem; color: var(--text-label); }
form label:first-child { margin-top: 0; }

input, select, textarea {
	width: 100%;
	font: inherit;
	color: var(--text);
	padding: .55rem .7rem;
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color .15s, box-shadow .15s;
}
input[type="checkbox"], input[type="radio"] { width: auto; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}
input:disabled, input[readonly] { background: var(--surface-2); color: var(--text-muted); cursor: default; }
input[readonly]:focus { box-shadow: none; border-color: var(--border-strong); }

.required { color: var(--danger); font-weight: 700; }
.field-hint { color: var(--text-muted); font-size: .82rem; margin: .6rem 0; }

fieldset {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .8rem 1rem 1rem;
	margin: 1rem 0;
}
legend { font-weight: 600; font-size: .85rem; padding: 0 .4rem; color: var(--text-muted); }

.grade-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .9rem; align-items: center; }

/* Campos em duas colunas — formulários longos não estendem tanto na vertical.
   .field = um campo (label + controle); .field-full ocupa a linha inteira. */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem; }
.form-grid .field { display: flex; flex-direction: column; min-width: 0; }
.form-grid .field-full { grid-column: 1 / -1; }
.form-grid .field > label { margin: .7rem 0 .3rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* Subtítulos de seção dentro de um formulário (Custos, Consumo de Tecido…):
   precisam respirar acima para separar do grupo de campos anterior. */
form > h4 { margin-top: 1.6rem; margin-bottom: .2rem; }

/* linha "campo + botão selecionar" (modelo/cliente) */
.field-row { margin: .85rem 0 .3rem; }
.field-row > label { margin: 0 0 .3rem; }
.model-select-row { display: flex; gap: .5rem; }
.model-select-row input { flex: 1; }

/* ── Botões ──────────────────────────────────────────────── */
button { font: inherit; }
form button[type="submit"] {
	margin-top: 1.2rem;
}
.btn-primary, .btn-secondary, .btn-danger,
form button[type="submit"],
.toolbar button, .toolbar a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .55rem 1rem;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	font-weight: 600;
	font-size: .88rem;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
	white-space: nowrap;
}
.btn-primary, form button[type="submit"] { background: var(--accent); color: #fff; }
.btn-primary:hover, form button[type="submit"]:hover { background: var(--accent-hover); text-decoration: none; }

.btn-secondary, .toolbar button, .toolbar a {
	background: var(--surface);
	color: var(--text);
	border-color: var(--border-strong);
}
.btn-secondary:hover, .toolbar button:hover, .toolbar a:hover { background: var(--surface-2); text-decoration: none; }

/* .toolbar .btn-danger eleva a especificidade acima de ".toolbar button"
   (senão o Remover dentro da toolbar herdava o visual neutro e, no hover,
   ficava com texto branco em fundo claro — "sumia"). */
.btn-danger, .toolbar .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .toolbar .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-primary, .toolbar .btn-primary { border-color: var(--accent); }

button:active { transform: translateY(1px); }
button:disabled {
	opacity: .5;
	cursor: not-allowed;
	background: var(--surface-2);
	color: var(--text-muted);
	border-color: var(--border);
}
button:disabled:active { transform: none; }

.btn-sm { padding: .25rem .5rem; font-size: .8rem; border-radius: 6px; }

/* botões "soltos" (ex.: Selecionar/Trocar, Adicionar, Gerenciar) herdam o
   visual secundário quando não têm classe específica */
.card form > button:not(.btn-primary):not(.btn-danger):not([type="submit"]),
.card > button:not(.btn-primary):not(.btn-danger) {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: .6rem; margin-right: .4rem;
	padding: .5rem .9rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--surface);
	color: var(--text); font-weight: 600; font-size: .85rem; cursor: pointer;
}
.card form > button:not(.btn-primary):not(.btn-danger):not([type="submit"]):hover,
.card > button:not(.btn-primary):not(.btn-danger):hover { background: var(--surface-2); }

/* ── Listas (resultados, itens clicáveis) ────────────────── */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.list-item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .65rem .8rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	cursor: pointer;
	transition: border-color .12s, background .12s, box-shadow .12s;
}
.list-item:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-sm); }
.list-item strong { font-weight: 600; }
.list-item span { color: var(--text-muted); font-size: .85rem; }
.list-empty { padding: 1rem; color: var(--text-muted); text-align: center; list-style: none; }

/* campo de busca */
input[type="search"], .search { margin-bottom: .25rem; }

/* ── Tabelas (itens de pedido, tamanhos) ─────────────────── */
table.itens, table.tabela { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .88rem; }
table.itens th, table.tabela th {
	text-align: left; font-weight: 600; color: var(--text-muted);
	padding: .5rem .6rem; border-bottom: 2px solid var(--border); font-size: .8rem;
	text-transform: uppercase; letter-spacing: .02em;
}
table.itens td, table.tabela td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
table.itens tfoot td, table.tabela tfoot td { border-bottom: none; border-top: 2px solid var(--border); font-size: .95rem; }
table.itens input[type="number"], table.tabela input[type="number"] { width: 5.5rem; padding: .35rem .5rem; }
table.itens tbody tr:hover, table.tabela tbody tr:hover { background: var(--surface-2); }

/* Coluna de nome (produto/peça): quebra dentro da célula. Sem isto um nome
   comprido sem espaços não quebra e estica/atravessa a coluna. */
table.itens td:first-child, table.tabela td:first-child { overflow-wrap: anywhere; }

/* Coluna numérica (Total/Loteado/Restante) centralizada e com largura justa */
table.tabela th:not(:first-child), table.tabela td:not(:first-child) { text-align: center; width: 1%; white-space: nowrap; }
/* Célula de quantidade do lote: input + botão "+N" lado a lado */
table.tabela td .cell-qtd { display: inline-flex; align-items: center; gap: .4rem; }
table.tabela td .cell-qtd input[type="number"] { margin: 0; }
.btn-restante {
	font: inherit; font-size: .78rem; font-weight: 600;
	padding: .3rem .55rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--surface-2);
	color: var(--accent); cursor: pointer; white-space: nowrap;
	transition: background .12s, border-color .12s;
}
.btn-restante:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ── OVERLAYS (modais) ───────────────────────────────────────
   Backdrop escurece + desfoca o fundo; o painel flutua com
   sombra forte e anima a entrada. Deixa claro que é uma aba
   sobreposta, não uma nova página. */
.overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 6vh 1rem 1rem;
	background: rgba(17, 24, 39, 0.45);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	animation: overlay-in .15s ease-out;
}
.overlay-content {
	width: min(680px, 100%);
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow-y: auto;          /* o painel rola internamente */
	overscroll-behavior: contain;
	animation: panel-in .2s cubic-bezier(.16,.84,.44,1);
	/* Respiro lateral de TODO o conteúdo do painel. Fica aqui, e não em cada
	   filho, para que um overlay novo já nasça com margem — antes, texto e
	   formulários que não estivessem na lista de seletores abaixo encostavam
	   nas bordas. Quem precisa pintar a faixa inteira sangra de volta com
	   margem negativa (ver .overlay-header e as faixas de filtro). */
	padding: 0 1.25rem 1.25rem;
}
/* Faixas que vão de borda a borda do painel (têm fundo/divisória própria). */
.overlay-header,
.overlay-content > .filtros,
.overlay-content > .item-filtros,
.overlay-content > .busca-filtros,
.overlay-content > .etapa-regua,
.overlay-content > .parcelamento-gerador {
	margin-left: -1.25rem;
	margin-right: -1.25rem;
}

/* Trava o scroll da página de trás enquanto há um overlay aberto. */
html:has(.overlay), body:has(.overlay) { overflow: hidden; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes panel-in {
	from { opacity: 0; transform: translateY(-14px) scale(.98); }
	to   { opacity: 1; transform: none; }
}
.overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
	position: sticky;     /* fica fixo no topo enquanto o conteúdo rola */
	top: 0;
	background: var(--surface);
	z-index: 2;
}
.overlay-header h3 { margin: 0; }
.btn-close {
	border: none; background: transparent; cursor: pointer;
	font-size: 1.15rem; line-height: 1; color: var(--text-muted);
	width: 2rem; height: 2rem; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.btn-close:hover { background: var(--danger-soft); color: var(--danger); }

/* região de filtros dentro do overlay */
.filtros, .item-filtros, .busca-filtros {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: end;
}
.filtros label, .item-filtros label, .busca-filtros label {
	margin: 0 0 .2rem; font-size: .78rem;
}
.item-filtros, .busca-filtros { border-bottom: none; }
.filtros input, .filtros select { width: auto; min-width: 9rem; }
.item-filtros > label, .busca-filtros > label { width: 100%; margin-top: .3rem; }

/* Filtro por linha (overlay Selecionar Modelo): botões-toggle em chips. */
.linhas-filtro { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.linhas-filtro button {
	font: inherit; font-size: .82rem; font-weight: 500;
	padding: .35rem .8rem; border-radius: 999px;
	border: 1px solid var(--border-strong); background: var(--surface);
	color: var(--text-muted); cursor: pointer; white-space: nowrap;
	transition: background .12s, border-color .12s, color .12s;
}
.linhas-filtro button:hover { border-color: var(--accent); color: var(--accent); }
.linhas-filtro button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ── Busca de ficha técnica: filtros com auto-complete + janela lateral ──
   Os combos de modelo/cliente são campos do filtro; a lista de resultados
   abre num painel à direita (.overlay-side), sem empurrar o conteúdo. */
.busca-filtros .combo-field { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 11rem; }
.busca-filtros .combo-field > label { width: auto; margin: 0 0 .2rem; font-size: .78rem; }
.combo-input { position: relative; display: flex; }
.combo-input > input[type="search"] { flex: 1; min-width: 0; padding-right: 2rem; }
/* esconde o ✕ nativo do webkit — usamos o nosso .btn-clear */
.combo-input > input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.btn-clear {
	position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
	width: 1.55rem; height: 1.55rem; flex: none; padding: 0;
	border: none; background: transparent; color: var(--text-muted); cursor: pointer;
	font-size: .8rem; line-height: 1; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s, color .15s;
}
.btn-clear:hover { background: var(--danger-soft); color: var(--danger); }

/* Overlay com painel lateral: conteúdo principal + janela de resultados. */
.overlay-dual { gap: 1rem; flex-wrap: wrap; }
.overlay-side {
	width: min(340px, 100%); max-height: 86vh;
	display: none;             /* só aparece com resultados (:has abaixo) */
	flex-direction: column; gap: 1rem;
}
.overlay-side:has(.combo-lista > *) { display: flex; }
.side-section {
	display: none;             /* só a seção com resultados aparece */
	flex-direction: column; min-height: 0; max-height: 86vh;
	background: var(--surface); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); overflow: hidden;
}
.side-section:has(.combo-lista > *) { display: flex; }
.overlay-side-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: .85rem 1rem; border-bottom: 1px solid var(--border);
	font-weight: 600; flex: none;
}
.combo-lista { padding: .85rem 1rem; overflow-y: auto; overscroll-behavior: contain; }

/* Blocos "soltos" do painel (formulário, tabela, textarea, barra de ações)
   não têm margem própria: sem isto encostam na divisória do cabeçalho ou na
   faixa de filtros logo acima. */
.overlay-content > form,
.overlay-content > table,
.overlay-content > textarea,
.overlay-content > .toolbar { margin-top: .9rem; }

/* espaçamento das áreas de conteúdo do overlay (o scroll é do painel;
   o respiro lateral vem do padding de .overlay-content) */
.overlay-content > [id$="-resultado"],
.overlay-content > #pedido-item-body,
.overlay-content > .grades-overlay-list,
.overlay-content > .list-empty {
	padding: 1rem 0 0;
}
.overlay-content .list { padding: 0; }

/* filtro de entrega no topo da página do Kanban (não é overlay) */
main > .filtros {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	margin-bottom: 1.25rem;
}

/* ── KANBAN ──────────────────────────────────────────────── */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }

.kanban-col {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-top: 3px solid var(--border-strong);
	border-radius: var(--radius);
	padding: .9rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	min-height: 120px;
}
.kanban-col h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0 0 .35rem; }
.kanban-col[data-situacao="orcamento"] { border-top-color: var(--warning); }
.kanban-col[data-situacao="producao"]  { border-top-color: var(--info); }
.kanban-col[data-situacao="enviado"]   { border-top-color: var(--success); }

.kanban-card {
	display: block;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: .7rem .8rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--text);
	cursor: pointer;
	text-align: left;
	width: 100%;
	box-shadow: var(--shadow-sm);
	transition: transform .08s, box-shadow .15s, border-color .15s;
}
.kanban-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-left-color: var(--accent-hover); text-decoration: none; }
.kanban-vazio { color: var(--text-muted); font-size: .85rem; padding: .5rem; text-align: center; }

/* ── Imagens (mockups e artes) ───────────────────────────── */
.img-grid, .artes-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .9rem;
	margin: .5rem 0 1rem;
}
.img-card, .arte-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .5rem;
	background: var(--surface-2);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.img-card img, .arte-card img {
	width: 100%;
	height: 130px;
	object-fit: contain;
	border-radius: 6px;
	background: var(--surface);
	border: 1px solid var(--border);
}
.img-placeholder {
	height: 130px; display: flex; align-items: center; justify-content: center;
	color: var(--text-muted); font-size: .8rem; background: var(--surface);
	border: 1px dashed var(--border-strong); border-radius: 6px;
}
.img-desc, .arte-info { font-size: .82rem; color: var(--text-muted); }
.arte-info strong { color: var(--text); display: block; }
.arte-custo { font-weight: 600; color: var(--text); }
.upload-row, .upload-arte { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: .5rem; }
.upload-row input, .upload-arte input, .upload-arte select { width: auto; flex: 1 1 8rem; }

/* ── Badges ──────────────────────────────────────────────── */
.badge, .badge-ativo, .badge-inativo, .badge-novo, .grades-badge {
	display: inline-block;
	padding: .12rem .5rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
}
.badge, .badge-inativo { background: var(--border); color: var(--text-muted); }
.badge-ativo, .badge-ok { background: var(--success-soft); color: var(--success); }
.badge-novo  { background: var(--accent-soft); color: var(--accent); }
.grades-badge { background: var(--info-soft); color: var(--info); }

/* ── Preços / tabelas (fichatec, overlay de produtos) ────── */
.preco-calculado, .grade-custo, .preco-row { font-variant-numeric: tabular-nums; }
.markup-hint, .grade-info { color: var(--text-muted); font-size: .82rem; }
.tabela-row, .preco-row, .grade-header, .grade-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.grade-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; margin-bottom: .6rem; background: var(--surface); }
.grades-overlay-list { display: flex; flex-direction: column; gap: .5rem; }

/* ── Home / dashboard ────────────────────────────────────── */
.home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
.home-card {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1.25rem 1.35rem;
	min-height: 96px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	color: var(--text);
	transition: border-color .15s, box-shadow .15s, transform .08s;
}
.home-card h3 { margin: 0; }
.home-card p { margin: 0; color: var(--text-muted); font-size: .85rem; }
a.home-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.home-card--soon { opacity: .6; cursor: default; }
.home-card--soon .badge { align-self: flex-start; margin-top: .35rem; }

/* ============================================================
   TEMA ESCURO — sobrescreve só os tokens; o resto herda.
   ============================================================ */
[data-theme="dark"] {
	--accent:        #818cf8;
	--accent-hover:  #a5b4fc;
	--accent-soft:   #1e2030;
	--accent-ring:   rgba(129, 140, 248, 0.45);

	--success: #34d399;  --success-soft: #0e2a20;
	--danger:  #f87171;  --danger-soft:  #2e1416;
	--warning: #fbbf24;  --warning-soft: #2c2210;
	--info:    #60a5fa;  --info-soft:    #102539;

	--bg:        #0e1116;
	--surface:   #171b22;
	--surface-2: #1e232c;
	--border:    #2a313c;
	--border-strong: #3a414e;
	--text:      #e6e8ec;
	--text-muted:#98a2b3;
	--text-label:#c2c9d4;

	--etapa-fornecimento: #22d3ee; --etapa-fornecimento-soft: #0c2a31;
	--etapa-corte:        #60a5fa; --etapa-corte-soft:        #122339;
	--etapa-costura:      #a78bfa; --etapa-costura-soft:      #211a36;
	--etapa-arte:         #f472b6; --etapa-arte-soft:         #311626;
	--etapa-acabamento:   #34d399; --etapa-acabamento-soft:   #0e2a20;

	--shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
	--shadow-md: 0 4px 14px rgba(0,0,0,.5);
	--shadow-lg: 0 18px 50px rgba(0,0,0,.65);
}
/* No escuro, o backdrop do modal precisa ser mais denso. */
[data-theme="dark"] .overlay { background: rgba(0, 0, 0, 0.6); }

/* ── Botão de alternância de tema (injetado por theme.js) ──── */
.theme-toggle {
	font: inherit;
	width: 2.2rem; height: 2.2rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	transition: background .15s, border-color .15s, transform .05s;
}
.theme-toggle:hover { background: var(--surface-2); border-color: var(--accent); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle--float { position: fixed; top: 1rem; right: 1rem; z-index: 50; box-shadow: var(--shadow-sm); }

/* ── Toasts (feedback discreto de salvamento) ──────────────── */
.toast-container {
	position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 2000;
	display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
	pointer-events: none;
}
.toast {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .55rem .9rem; border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text);
	border: 1px solid var(--border-strong);
	border-left: 3px solid var(--text-muted);
	box-shadow: var(--shadow-md);
	font-size: .85rem; font-weight: 500;
	opacity: 0; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
}
.toast--show { opacity: 1; transform: none; }
.toast::before { content: "✓"; font-weight: 700; }
.toast--ok   { border-left-color: var(--success); }
.toast--ok::before   { content: "✓"; color: var(--success); }
.toast--erro { border-left-color: var(--danger); }
.toast--erro::before { content: "✕"; color: var(--danger); }

/* ============================================================
   BADGES SEMÂNTICOS + correção de esticão em listas flex
   ============================================================ */
/* Em .list-item (flex-column) os filhos esticam: trava o badge no início. */
.list-item .badge,
.list-item [class*="badge--"] { align-self: flex-start; }
/* Linha de badges (vários lado a lado) */
.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }

/* Variantes por significado (status, papéis…). Reaproveitam os tokens soft. */
.badge--pendente,     .badge--orcamento  { background: var(--warning-soft); color: var(--warning); }
.badge--agendada,     .badge--info       { background: var(--info-soft);    color: var(--info); }
.badge--em_andamento, .badge--producao,
.badge--vendas                            { background: var(--accent-soft);  color: var(--accent); }
.badge--entregue,     .badge--enviado,
.badge--pago,         .badge--success    { background: var(--success-soft); color: var(--success); }
.badge--admin                             { background: var(--danger-soft);  color: var(--danger); }
.badge--producao                          { background: var(--info-soft);    color: var(--info); }
/* Badge "contador" neutro (ex.: 2/4 etapas) */
.badge--count { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
/* Destaques de prazo */
.badge--atrasado { background: var(--danger-soft); color: var(--danger); }
.badge--hoje     { background: var(--warning-soft); color: var(--warning); }
/* Recebimentos: cabeçalho do pedido e situação da parcela */
.badge--aberto    { background: var(--info-soft);    color: var(--info); }
.badge--quitado,
.badge--recebido  { background: var(--success-soft); color: var(--success); }
.badge--encerrado { background: var(--surface-2);    color: var(--text-muted); border-color: var(--border); }

/* badge.dark-friendly: o cinza padrão no escuro */
.badge, .badge-inativo { border: 1px solid transparent; }

/* ============================================================
   KANBAN — cores por situação (pedidos) e por etapa (produção)
   ============================================================ */
/* Cabeçalho da coluna com a cor da situação/etapa */
.kanban-col h3 { display: flex; align-items: center; gap: .4rem; }

/* Cards: estrutura em coluna, para título + meta respirarem */
.kanban-card {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}
.kanban-card strong { font-weight: 600; }
.kanban-card .badge { align-self: flex-start; }
/* meta (texto + badges) em linha */
.kanban-card .kanban-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; font-size: .82rem; color: var(--text-muted); font-weight: 400; }
/* Pedido enviado não é "atrasado" — esconde o selo nessa coluna. */
.kanban-col[data-situacao="enviado"] .badge--atrasado { display: none; }

/* PEDIDOS: a cor da coluna pinta a borda dos cards dela */
.kanban-col[data-situacao="orcamento"] .kanban-card { border-left-color: var(--warning); }
.kanban-col[data-situacao="producao"]  .kanban-card { border-left-color: var(--info); }
.kanban-col[data-situacao="enviado"]   .kanban-card { border-left-color: var(--success); }

/* PRODUÇÃO: cor por etapa na coluna (topo + título) e na borda do card */
.kanban-col[data-tipo="FORNECIMENTO"] { border-top-color: var(--etapa-fornecimento); }
.kanban-col[data-tipo="CORTE"]        { border-top-color: var(--etapa-corte); }
.kanban-col[data-tipo="COSTURA"]      { border-top-color: var(--etapa-costura); }
.kanban-col[data-tipo="ARTE"]         { border-top-color: var(--etapa-arte); }
.kanban-col[data-tipo="ACABAMENTO"]   { border-top-color: var(--etapa-acabamento); }
.kanban-col[data-tipo="FORNECIMENTO"] h3 { color: var(--etapa-fornecimento); }
.kanban-col[data-tipo="CORTE"] h3        { color: var(--etapa-corte); }
.kanban-col[data-tipo="COSTURA"] h3      { color: var(--etapa-costura); }
.kanban-col[data-tipo="ARTE"] h3         { color: var(--etapa-arte); }
.kanban-col[data-tipo="ACABAMENTO"] h3   { color: var(--etapa-acabamento); }
.kanban-col[data-tipo="FORNECIMENTO"] .kanban-card { border-left-color: var(--etapa-fornecimento); }
.kanban-col[data-tipo="CORTE"] .kanban-card        { border-left-color: var(--etapa-corte); }
.kanban-col[data-tipo="COSTURA"] .kanban-card      { border-left-color: var(--etapa-costura); }
.kanban-col[data-tipo="ARTE"] .kanban-card         { border-left-color: var(--etapa-arte); }
.kanban-col[data-tipo="ACABAMENTO"] .kanban-card   { border-left-color: var(--etapa-acabamento); }

/* Estado vazio mais discreto/elegante */
.kanban-vazio {
	color: var(--text-muted); font-size: .82rem; text-align: center;
	padding: 1rem .5rem; border: 1px dashed var(--border-strong);
	border-radius: var(--radius-sm); background: transparent;
}

/* ============================================================
   OS — régua de etapas + overlay mais largo e arejado
   ============================================================ */
/* O overlay da OS tem muito conteúdo: dá mais largura. */
.overlay-content.overlay-os,
.overlay-content:has(.etapa-regua) { width: min(840px, 100%); }
.overlay-content:has(.etapa-regua) > form { padding-top: .5rem; padding-bottom: 1rem; }
.overlay-content:has(.etapa-regua) > .card { margin: 0 0 .25rem; }

.etapa-regua {
	display: flex; flex-wrap: wrap; gap: .4rem;
	padding: .9rem 1.25rem;
	border-bottom: 1px solid var(--border);
}
.etapa-regua .etapa-link,
.etapa-regua .etapa-atual {
	font: inherit; font-size: .8rem; font-weight: 600;
	padding: .3rem .7rem; border-radius: 999px;
	border: 1px solid var(--border-strong);
	background: var(--surface); color: var(--text-muted);
	cursor: pointer; white-space: nowrap;
}
.etapa-regua .etapa-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.etapa-regua .etapa-atual { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; }

/* Ficha(s) do lote dentro da OS */
.ficha-lote { padding: .6rem 0; border-top: 1px solid var(--border); }
.ficha-lote:first-of-type { border-top: none; }
.ficha-lote-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.ficha-lote-head strong { margin-bottom: 0; font-size: 1.05rem; font-weight: 600; }
.ficha-lote strong { display: block; margin-bottom: .25rem; }
.ficha-lote ul { margin: .2rem 0; padding-left: 1.1rem; color: var(--text-muted); font-size: .85rem; }
.ficha-lote p { margin: .25rem 0 0; font-size: .82rem; color: var(--text-muted); }

/* checkbox alinhado com o label na mesma linha */
.checkbox-inline { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; }
.checkbox-inline input { margin: 0; }

/* ── Botão genérico .btn (ex.: PDF da OS) = secundário ─────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .55rem 1rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong); background: var(--surface);
	color: var(--text); font-weight: 600; font-size: .88rem;
	cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ============================================================
   CAMPOS DE DATA — botões "hoje" / "+N" como chips
   ============================================================ */
.date-input { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.date-input input[type="date"] { flex: 1 1 9rem; min-width: 0; }
.date-hoje, .date-mais {
	font: inherit; font-size: .78rem; font-weight: 600;
	padding: .3rem .6rem; border-radius: var(--radius-sm);
	border: 1px solid var(--border-strong);
	background: var(--surface-2); color: var(--text-muted);
	cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.date-hoje:hover, .date-mais:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ============================================================
   CONFIGURAÇÕES — fluxos de produção
   ============================================================ */
.hint { color: var(--text-muted); font-size: .85rem; margin: .2rem 0 1rem; }
.erro { color: var(--danger); font-size: .85rem; }
.alert-erro {
	background: var(--danger-soft); color: var(--danger);
	border: 1px solid var(--danger); border-radius: var(--radius-sm);
	padding: .6rem .85rem; font-size: .88rem; margin-bottom: 1rem;
}
.ok   { color: var(--success); font-size: .85rem; }

.fluxo-novo { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.fluxo-novo input { flex: 1; }

/* Linhas de produto — form novo + linhas editáveis. */
.linha-nova { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.linha-nova input { flex: 1; }
.linha-item {
	display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
	border: 1px solid var(--border); border-radius: var(--radius);
	padding: .55rem .7rem; margin-bottom: .5rem; background: var(--surface-2);
}
.linha-item input[name="nome"] { flex: 1; min-width: 10rem; }
/* ============================================================
   CONFIGURAÇÕES — seções recolhíveis (setinha no cabeçalho)
   ============================================================ */
.config-section-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: .5rem; cursor: pointer; user-select: none;
}
.config-section-head h2 { margin: 0; }
.collapse-toggle {
	font: inherit; font-size: 1.1rem; line-height: 1; flex: none;
	width: 1.9rem; height: 1.9rem;
	display: inline-flex; align-items: center; justify-content: center;
	border: none; background: none; color: var(--text-muted); cursor: pointer;
	transition: transform .15s ease, color .12s;
}
.config-section-head:hover .collapse-toggle { color: var(--accent); }
.config-section.collapsed .collapse-toggle { transform: rotate(-90deg); }
.config-section.collapsed .config-section-body { display: none; }
.config-section-body { margin-top: .6rem; }

/* Dados da empresa — preview do logo ao lado do seletor de arquivo. */
.empresa-logo { display: flex; gap: 1.1rem; align-items: flex-start; margin: 1rem 0; }
.empresa-logo .field { flex: 1; min-width: 0; }
.empresa-logo-preview {
	flex: none; width: 120px; height: 120px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--surface-2); overflow: hidden;
}
.empresa-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.fluxo-card {
	border: 1px solid var(--border); border-radius: var(--radius);
	padding: 1rem; margin-bottom: 1rem; background: var(--surface-2);
}
.fluxo-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.fluxo-head input[type="text"] { flex: 1; min-width: 12rem; }

.fluxo-etapas { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; counter-reset: etapa; }
.fluxo-etapas li {
	display: flex; align-items: center; gap: .5rem;
	padding: .4rem .6rem; background: var(--surface);
	border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.fluxo-etapas li > span { flex: 1; font-weight: 500; }
.fluxo-etapas li > button {
	font: inherit; width: 1.9rem; height: 1.9rem; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text-muted); cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.fluxo-etapas li > button:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.fluxo-add { display: flex; gap: .5rem; align-items: center; }
.fluxo-add select { flex: 1; }

/* ============================================================
   USUÁRIOS — grupo de checkboxes (papéis) como chips
   ============================================================ */
.checkbox-group { display: flex; flex-direction: column; gap: .4rem; }
.checkbox-group--row { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.checkbox-item {
	display: inline-flex; align-items: center; gap: .5rem; width: fit-content;
	padding: .45rem .8rem; border: 1px solid var(--border-strong);
	border-radius: 999px; background: var(--surface); cursor: pointer;
	font-weight: 500; font-size: .88rem; margin: 0;
	transition: background .12s, border-color .12s, color .12s;
}
.checkbox-item:hover { border-color: var(--accent); }
.checkbox-item:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.checkbox-item input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }

/* ============================================================
   LOGIN — card central estreito
   ============================================================ */
.login-main {
	min-height: 100vh; display: flex; align-items: center; justify-content: center;
	padding: 1.5rem; max-width: none;
}
.login-card { width: min(380px, 100%); margin: 0; }
.login-card h1 { color: var(--accent); margin-bottom: .25rem; }
.login-card .form-erro {
	background: var(--danger-soft); color: var(--danger);
	padding: .55rem .75rem; border-radius: var(--radius-sm);
	font-size: .85rem; margin: .5rem 0 0;
}
.login-card button[type="submit"] { width: 100%; }

/* ============================================================
   APP SHELL — sidebar recolhível + barra superior
   ============================================================ */
body.app { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
	flex: none;
	width: 272px;
	background: var(--surface);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 30;
	transition: width .18s ease;
}
.sidebar-brand {
	display: flex; align-items: center; justify-content: space-between;
	gap: .5rem; padding: .85rem 1rem; height: 60px;
	border-bottom: 1px solid var(--border);
}
.brand-link {
	display: flex; align-items: center; gap: .6rem;
	text-decoration: none; color: var(--text); font-weight: 700; font-size: 1.05rem;
	min-width: 0;
}
.brand-mark {
	flex: none; width: 30px; height: 30px; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent); color: #fff; font-weight: 700;
}
.sidebar-collapse {
	flex: none; width: 30px; height: 30px; border: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
	transition: background .12s, color .12s;
}
.sidebar-collapse:hover { background: var(--surface-2); color: var(--text); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .5rem; display: flex; flex-direction: column; gap: .12rem; }

.icon { width: 20px; height: 20px; flex: none; }

.nav-item {
	display: flex; align-items: center; gap: .7rem;
	width: 100%; padding: .55rem .7rem; border: none; background: transparent;
	font: inherit; text-align: left; color: var(--text-label); cursor: pointer;
	border-radius: var(--radius-sm); text-decoration: none;
	transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item .nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .icon { color: var(--text-muted); transition: color .12s; }
.nav-item:hover .icon { color: var(--text); }

.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .icon { color: var(--accent); }

.nav-caret { width: 16px; height: 16px; transition: transform .18s ease; color: var(--text-muted); }
.nav-group.open > .nav-group-head .nav-caret { transform: rotate(180deg); }

.nav-sub { display: none; flex-direction: column; gap: .1rem; margin: .1rem 0 .25rem; padding-left: 2.4rem; }
.nav-group.open > .nav-sub { display: flex; }
.nav-subitem {
	display: block; padding: .42rem .6rem; border-radius: var(--radius-sm);
	color: var(--text-muted); text-decoration: none; font-size: .9rem;
	position: relative; transition: background .12s, color .12s;
}
.nav-subitem:hover { background: var(--surface-2); color: var(--text); }
.nav-subitem.active { color: var(--accent); font-weight: 600; }
.nav-subitem.active::before {
	content: ""; position: absolute; left: -.9rem; top: 50%; transform: translateY(-50%);
	width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Rodapé: usuário + sair */
.sidebar-foot { border-top: 1px solid var(--border); padding: .6rem .5rem; display: flex; flex-direction: column; gap: .2rem; }
.sidebar-user { display: flex; align-items: center; gap: .6rem; padding: .4rem .55rem; min-width: 0; }
.user-avatar {
	flex: none; width: 32px; height: 32px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent-soft); color: var(--accent); font-weight: 700; text-transform: uppercase;
}
.user-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-meta strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--text-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-logout {
	display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem;
	border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none;
	transition: background .12s, color .12s;
}
.sidebar-logout:hover { background: var(--danger-soft); color: var(--danger); }
.sidebar-logout .icon { color: inherit; }
/* "Sair" virou <button> dentro de um <form> (logout é POST, por CSRF): zera o
   visual de botão para continuar idêntico ao link que era antes. */
.sidebar-logout-form { display: contents; }
button.sidebar-logout { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

/* Mensagens de formulário fora do card de login (ex.: troca de senha). */
.form-erro { color: var(--danger); font-size: .875rem; margin-bottom: .75rem; }
.form-ok { color: var(--accent); font-size: .875rem; margin-bottom: .75rem; }

/* ── Área de conteúdo + barra superior ───────────────────── */
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* main usa margin:auto p/ centralizar; num flex-column isso anula o stretch e
   encolhe ao conteúdo — width:100% restaura a largura total (com max-width). */
.app-content > main { width: 100%; }
.app-topbar {
	display: flex; align-items: center; gap: 1rem;
	height: 60px; padding: 0 1.5rem;
	background: var(--surface); border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	position: sticky; top: 0; z-index: 20;
}
.topbar-title { margin: 0; font-size: 1.15rem; flex: 1; min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: .35rem; }
.topbar-burger {
	display: none; flex: none; width: 38px; height: 38px; cursor: pointer;
	align-items: center; justify-content: center;
	border: 1px solid var(--border); border-radius: var(--radius-sm);
	background: transparent; color: var(--text);
}

/* ── Estado recolhido (rail de ícones) ───────────────────── */
html[data-sidebar="collapsed"] .sidebar { width: 64px; }
html[data-sidebar="collapsed"] .sidebar .nav-label,
html[data-sidebar="collapsed"] .sidebar .nav-caret,
html[data-sidebar="collapsed"] .sidebar .brand-text,
html[data-sidebar="collapsed"] .sidebar .user-meta,
html[data-sidebar="collapsed"] .sidebar .sidebar-logout .nav-label { display: none; }
html[data-sidebar="collapsed"] .sidebar .nav-sub { display: none; }
html[data-sidebar="collapsed"] .nav-item,
html[data-sidebar="collapsed"] .sidebar-logout { justify-content: center; gap: 0; padding: .55rem; }
html[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; padding: .85rem .5rem; }
html[data-sidebar="collapsed"] .sidebar-collapse { transform: rotate(180deg); }
html[data-sidebar="collapsed"] .sidebar-user { justify-content: center; }

/* ── Subtabs (Produtos), breadcrumb, boas-vindas ─────────── */
.subtabs { display: flex; gap: .35rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.subtabs button {
	font: inherit; padding: .55rem .9rem; border: none; background: transparent;
	color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
	margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.subtabs button:hover { color: var(--text); }
.subtabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.breadcrumb { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .9rem; color: var(--text-muted); }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.home-welcome { margin-bottom: 1.5rem; }
.home-welcome h2 { margin: 0 0 .25rem; }
.home-welcome p { margin: 0; color: var(--text-muted); }

/* ── Backdrop (gaveta mobile) ────────────────────────────── */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(16,24,40,.45); z-index: 25; }

/* ── Responsivo: sidebar vira gaveta sobreposta ──────────── */
@media (max-width: 900px) {
	.sidebar {
		position: fixed; top: 0; left: 0; height: 100vh; width: 272px;
		transform: translateX(-100%); transition: transform .2s ease;
		box-shadow: var(--shadow-lg);
	}
	html[data-sidebar="collapsed"] .sidebar { width: 272px; } /* no mobile, sempre completa */
	html[data-sidebar="collapsed"] .sidebar .nav-label,
	html[data-sidebar="collapsed"] .sidebar .nav-caret,
	html[data-sidebar="collapsed"] .sidebar .brand-text,
	html[data-sidebar="collapsed"] .sidebar .user-meta,
	html[data-sidebar="collapsed"] .sidebar .sidebar-logout .nav-label { display: revert; }
	html[data-sidebar="collapsed"] .nav-item,
	html[data-sidebar="collapsed"] .sidebar-logout { justify-content: flex-start; gap: .7rem; padding: .55rem .7rem; }
	body.sidebar-open .sidebar { transform: translateX(0); }
	body.sidebar-open .sidebar-backdrop { display: block; }
	.sidebar-collapse { display: none; }
	.topbar-burger { display: inline-flex; }
}


/* ============================================================
   RECEBIMENTOS (Pedidos → Recebimentos)
   Uma tabela onde cada <tbody> é um pedido: a linha do pedido e,
   recuadas sob ela, as parcelas — que são a unidade de baixa.
   ============================================================ */
/* Faixa de números do topo (em aberto, atrasado…) */
.receb-resumo {
	display: flex; flex-wrap: wrap; gap: .75rem;
	margin: .5rem 0 1rem;
}
.receb-resumo span {
	display: flex; flex-direction: column; gap: .15rem;
	padding: .5rem .85rem;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius-sm); min-width: 8rem;
}
.receb-resumo small { color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.receb-resumo strong { font-size: 1rem; }
.receb-resumo--atraso { border-color: var(--danger); }
.receb-resumo--atraso strong { color: var(--danger); }

/* Separação entre pedidos: cada grupo é um bloco visual. */
.receb-grupo { border-bottom: 3px solid var(--border); }
.receb-head > td {
	background: var(--surface-2);
	vertical-align: top;
	border-bottom: 1px solid var(--border-strong);
}
/* Barra lateral com a cor do estado do pedido (em aberto / atrasado / quitado) */
.receb-grupo[data-estado="atrasado"]  .receb-head > td:first-child { box-shadow: inset 3px 0 var(--danger); }
.receb-grupo[data-estado="quitado"]   .receb-head > td:first-child { box-shadow: inset 3px 0 var(--success); }
.receb-grupo[data-estado="aberto"]    .receb-head > td:first-child { box-shadow: inset 3px 0 var(--info); }
.receb-grupo[data-estado="encerrado"] .receb-head > td:first-child { box-shadow: inset 3px 0 var(--border-strong); }
.receb-grupo[data-estado="encerrado"] { opacity: .7; }

/* Cada célula empilha o dado principal + suas anotações. */
.recebimentos td small { display: block; color: var(--text-muted); font-size: .75rem; }
.recebimentos .receb-alerta { color: var(--danger); }
.recebimentos td { vertical-align: top; }
.receb-parcela > td:first-child { padding-left: 1.75rem; color: var(--text-muted); }
.receb-parcela[data-estado="atrasado"] > td { background: var(--danger-soft); }
.receb-parcela[data-estado="recebido"] > td { color: var(--text-muted); }

/* Ações: empilham em telas estreitas em vez de espremer a coluna. */
.receb-acoes { white-space: normal; }
.receb-acoes button { margin: .1rem .15rem 0 0; }

/* Mensagem de cobrança pronta para copiar */
.cobranca-msg {
	width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem; line-height: 1.5; resize: vertical;
}

/* Subtítulo dentro de uma seção de Configurações */
.config-subtitulo {
	margin: 1.25rem 0 .25rem; font-size: .85rem; text-transform: uppercase;
	letter-spacing: .03em; color: var(--text-muted);
}


/* ============================================================
   OVERLAY DE PARCELAMENTO (Recebimentos)
   Painel mais largo: são três campos numéricos lado a lado mais
   uma tabela de valor + vencimento por parcela — em 680px isso
   quebrava linha e os rótulos desalinhavam dos campos.
   ============================================================ */
.overlay-content.overlay-parcelamento { width: min(800px, 100%); }

/* Faixa do gerador: rótulo em cima do campo (o .filtros genérico põe ao lado,
   que só funciona quando há um campo só) e a ação encostada à direita. */
.parcelamento-gerador {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75rem .9rem;
	padding: 1rem 1.25rem;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}
/* A ação fica colada nos campos que ela usa (e não jogada na outra ponta da
   faixa): "estes parâmetros → gerar". */
.parcelamento-gerador > button { flex: none; }

/* Campo rotulado fora de <form> (onde o seletor global de label não alcança). */
.campo { display: flex; flex-direction: column; min-width: 0; }
.campo > label {
	margin: 0 0 .3rem;
	font-weight: 500; font-size: .8rem; color: var(--text-label);
}
/* Quantidade de parcelas e intervalo são números de 1 a 3 dígitos: um campo
   de largura total ao lado de um rótulo curto parece um erro de layout. */
.campo-num { width: 7.5rem; flex: none; }
.campo-forma { max-width: 22rem; }
/* .date-input tem flex-wrap: sem largura suficiente o botão "+N" cai para uma
   segunda linha e o campo fica com o dobro da altura dos vizinhos. */
.campo-data { width: 19.5rem; flex: none; }
.campo-data .date-input { flex-wrap: nowrap; }

/* Tabela de edição das parcelas: número estreito, valor e vencimento com o
   espaço que os inputs pedem. */
/* A tabela não estica até a borda do painel: com três colunas de campo, o
   table-layout: 100% deixava um vão morto entre Valor e Vencimento. */
table.parcelas-edit { width: auto; }
.parcelas-edit th:first-child,
.parcelas-edit td.parcela-num { width: 5rem; color: var(--text-muted); }
.parcelas-edit td { padding-top: .35rem; padding-bottom: .35rem; }
.parcelas-edit .money-input { max-width: 11rem; }
/* Vencimento com a mesma medida do valor: as duas colunas ficam alinhadas em
   vez de o campo de data esticar até o fim da tabela. */
.parcelas-edit .date-input { max-width: 18rem; flex-wrap: nowrap; }
.parcelas-edit .date-input input[type="date"] { flex: 0 1 10rem; }
.parcelas-edit tfoot td { font-weight: 600; padding-top: .6rem; }
.parcelas-edit tfoot td:last-child { font-weight: 400; color: var(--text-muted); }

/* ── DRE ──────────────────────────────────────────────────────────────
   Só o mínimo estrutural: sem isto os nomes das contas saem como botões
   de navegador e o overlay de lançamentos não rola. O acabamento visual
   entra junto com o resto na passada de CSS. */

/* Nome da conta é um botão (abre o detalhamento) que precisa parecer link. */
.btn-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--accent);
	cursor: pointer;
	text-align: left;
}
.btn-link:hover { text-decoration: underline; }

/* Números do relatório alinhados à direita e tabulares, para as casas
   decimais empilharem coluna a coluna. */
.dre .num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Seções: o título do grupo pesa mais que suas linhas. */
.dre .dre-titulo td { font-weight: 600; padding-top: .9rem; }
.dre .dre-linha td:first-child { padding-left: 1.25rem; }

/* Subtotais fecham o relatório; o resultado é a linha que se procura. */
.dre .dre-totais td { font-weight: 600; }
.dre .dre-resultado td { font-size: 1.05rem; border-top: 2px solid var(--border-strong); }
.dre-negativo { color: var(--danger); }

/* Overlay de lançamentos: rolagem própria (podem ser centenas). */
.lancamentos-scroll { max-height: 60vh; overflow-y: auto; }
.overlay-lancamentos { max-width: 60rem; }

/* Rodapé de procedência: uma "ficha" por fonte, não um parágrafo corrido. */
.dre-procedencia {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 1rem;
	font-size: .85rem;
	opacity: .8;
}
.dre-procedencia span { display: flex; flex-direction: column; }
.dre-procedencia small { text-transform: uppercase; letter-spacing: .04em; opacity: .7; }

/* ── Matriz mensal ───────────────────────────────────────────────
   Treze colunas não cabem em tela estreita. A rolagem é DA TABELA (não da
   página) e a coluna das contas fica grudada à esquerda: rolando até dezembro
   sem ela, o número perde a linha a que pertence. */
.dre-matriz-scroll { overflow-x: auto; }

.dre-matriz { font-size: .85rem; white-space: nowrap; }
.dre-matriz th, .dre-matriz td { padding: .3rem .5rem; }

.dre-matriz .dre-conta {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--surface);
	white-space: normal;
	min-width: 12rem;
}

/* A coluna do ano fecha a linha: separada dos meses e com o peso do total.
   Fica grudada à DIREITA porque é a coluna que mais se procura e seria
   justamente a que a rolagem esconde (é a última das treze). */
.dre-matriz .dre-col-ano {
	position: sticky;
	right: 0;
	z-index: 1;
	background: var(--surface);
	border-left: 1px solid var(--border-strong);
	font-weight: 600;
}

/* O mês corrente é o que se está avaliando — fica marcado sem virar destaque. */
.dre-matriz .dre-mes-atual { background: var(--accent-soft); }

/* Célula com valor abre os lançamentos daquele mês. */
.dre-matriz .dre-celula { cursor: pointer; }
.dre-matriz .dre-celula:hover { text-decoration: underline; }