:root {
  --t-menor: 14px;
  --t-base: 15px;
  --t-maior: 16px;
  --pad-v: 5px;
  --lateral: 560px;
  --fundo: #fafaf8;
  --painel: #f2f2ef;
  --flutuante: #ffffff;
  --linha: #ebebe8;
  --texto: #1c1c1c;
  --mudo: #6b6b68;
  --destaque: #b8520f;
  --neg: #c21f1f;
  --hover: #efefeb;
  --cursor: #e6e6e1;
  --thumb: #c4c4bf;
  --op-producao: #1f7a3f;
  --op-venda: #1f5fa8;
  --op-compra: #7a3fb0;
  --op-uso: #8a6500;
  --op-ajuste: #6b6b68;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #141414;
    --painel: #1a1a1a;
    --flutuante: #222222;
    --linha: #232323;
    --texto: #e4e4e4;
    --mudo: #8c8c8c;
    --destaque: #e0782f;
    --neg: #ff6b6b;
    --hover: #1d1d1d;
    --cursor: #262626;
    --thumb: #4a4a4a;
    --op-producao: #5cc27f;
    --op-venda: #6aa6e8;
    --op-compra: #b58ae6;
    --op-uso: #d9b43a;
    --op-ajuste: #8c8c8c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100dvh; background: var(--fundo); color: var(--texto); }
body { display: flex; flex-direction: column; overflow: hidden; font: var(--t-maior)/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--destaque); }
h2, h3 { margin: 0 0 4px; font-size: var(--t-menor); text-transform: uppercase; letter-spacing: .06em; color: var(--mudo); font-weight: 600; }
h2 .mudo, h3 .mudo { text-transform: none; letter-spacing: 0; font-weight: 400; }
h3 { margin-top: 14px; }
p { margin: 4px 0; }
kbd { font: var(--t-menor) ui-monospace, Consolas, monospace; border: 1px solid var(--linha); padding: 0 3px; margin-right: 2px; }

.topo { display: flex; align-items: center; gap: 14px; padding: 5px 10px; background: var(--painel); flex: none; }
.marca { font-weight: 800; letter-spacing: .12em; }
.marca span { font-weight: 400; letter-spacing: 0; color: var(--mudo); margin-left: 6px; }
.topo nav { display: flex; gap: 10px; align-items: center; }
#busca { width: 16em; }
.abas { gap: 0; align-self: stretch; margin: -5px 0; }
.abas a { display: flex; align-items: center; padding: 0 12px; color: var(--mudo); }
.abas a.ativa { color: var(--texto); font-weight: 600; background: var(--fundo); }
.flash { color: var(--destaque); }
.topo .util { margin-left: auto; font-size: var(--t-menor); }
.topo .util svg { vertical-align: -3px; }
.topo .util.ativa { color: var(--texto); }

main { flex: 1; min-height: 0; padding: 8px 10px; display: grid; gap: 8px 22px; }
main.centro { place-items: center; }
.rola { overflow: auto; min-height: 0; }
.mudo { color: var(--mudo); }
.neg { color: var(--neg); }
.baixo { color: var(--neg); font-weight: 600; }
.encargo { color: var(--op-uso); }

table { border-collapse: collapse; width: 100%; font-size: var(--t-base); }
th { text-align: left; font-weight: 500; font-size: var(--t-menor); color: var(--mudo); position: sticky; top: 0; background: var(--fundo); z-index: 1; }
th, td { padding: var(--pad-v) 6px; border-bottom: 1px solid var(--linha); white-space: nowrap; vertical-align: middle; }
td:first-child, th:first-child { padding-left: 2px; }
.ordenavel th { cursor: pointer; user-select: none; }
.ordenavel th[data-dir=a]::after { content: " ▲"; }
.ordenavel th[data-dir=d]::after { content: " ▼"; }
td.txt { max-width: 0; width: 40%; overflow: hidden; text-overflow: ellipsis; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: var(--hover); }
tr.pedida td { background: color-mix(in srgb, var(--op-producao) 9%, transparent); }
tr.cursor td { background: var(--cursor); }
tr.cursor td:first-child { box-shadow: inset 2px 0 var(--destaque); }
td.editavel { cursor: text; position: relative; }
td.editavel .valor { border-bottom: 1px dotted transparent; }
td.editavel:hover .valor { border-bottom-color: var(--mudo); }
td.editando .valor { visibility: hidden; }
form.edita { position: absolute; top: 0; right: 0; height: calc(var(--t-base) * 1.35 + 2 * var(--pad-v)); z-index: 2; }
form.edita input { width: 9ch; height: 100%; padding: 0 5px; text-align: right; }
td.editavel .erro { position: absolute; top: calc(var(--t-base) * 1.35 + 2 * var(--pad-v) + 2px); right: 0; z-index: 3; margin: 0; padding: 3px 6px; width: max-content; max-width: 320px; text-align: left; background: var(--flutuante); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
tr.sel td { background: var(--cursor); font-weight: 600; }
tr.sel td:first-child::before { content: "▸ "; }
tr.inativo td { opacity: .5; }
tr.total td { font-weight: 600; }
td.acao { padding-right: 0; width: 1%; }

input, select, button { font: inherit; font-size: var(--t-base); color: inherit; background: var(--fundo); border: 1px solid var(--linha); border-radius: 0; padding: 1px 5px; }
input:focus, select:focus { outline: 1px solid var(--destaque); outline-offset: -1px; }
button { cursor: pointer; background: var(--painel); }
button, a, tbody tr td, td.editavel .valor { transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
button:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
button.fraco { color: var(--mudo); border-color: transparent; background: none; }
button[value=producao] { color: var(--op-producao); border-color: var(--op-producao); }
td.op-producao { color: var(--op-producao); font-weight: 600; }
button[value=venda] { color: var(--op-venda); border-color: var(--op-venda); }
td.op-venda { color: var(--op-venda); font-weight: 600; }
button[value=compra] { color: var(--op-compra); border-color: var(--op-compra); }
td.op-compra { color: var(--op-compra); font-weight: 600; }
button[value=uso] { color: var(--op-uso); border-color: var(--op-uso); }
td.op-uso { color: var(--op-uso); font-weight: 600; }
button[value=ajuste] { color: var(--op-ajuste); border-color: var(--op-ajuste); }
td.op-ajuste { color: var(--op-ajuste); font-weight: 600; }
button[value=producao]:hover { background: var(--op-producao); color: var(--fundo); border-color: var(--op-producao); }
button[value=venda]:hover { background: var(--op-venda); color: var(--fundo); border-color: var(--op-venda); }
button[value=compra]:hover { background: var(--op-compra); color: var(--fundo); border-color: var(--op-compra); }
button[value=uso]:hover { background: var(--op-uso); color: var(--fundo); border-color: var(--op-uso); }
button[value=ajuste]:hover { background: var(--op-ajuste); color: var(--fundo); border-color: var(--op-ajuste); }
.erro { color: var(--neg); margin: 2px 0 6px; white-space: normal; font-size: var(--t-base); }

.lancar { display: flex; gap: 3px; }
.lancar input { width: 4.3em; }
.lancar input[name=valor] { width: 6.3em; }
.lancar select { max-width: 14em; }

.campos { display: grid; grid-template-columns: max-content 1fr; gap: 3px 8px; align-items: center; }
.campos label { display: contents; color: var(--mudo); font-size: var(--t-base); }
.campos label.check { display: flex; gap: 6px; align-items: center; grid-column: 2; }
.campos button { grid-column: 2; justify-self: start; margin-top: 3px; }

.login { display: flex; gap: 6px; align-items: end; }
.login label { display: flex; flex-direction: column; color: var(--mudo); }

.painel { grid-template-columns: minmax(0, 1fr) var(--lateral); }
.painel.com-outras { grid-template-rows: minmax(0, 1fr) auto; }
.area { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 22px; min-height: 0; }
.area .produtos { max-height: 55dvh; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-height: 0; }
.painel > .area { grid-row: 1 / -1; }
.lateral { background: var(--painel); margin: -8px -10px -8px 0; padding: 8px 10px; scroll-padding-bottom: calc(var(--t-base) * 1.35 + 2 * var(--pad-v) + 2px); }
.lateral th, .outras th { background: var(--painel); }
.lateral tfoot td { background: var(--painel); position: sticky; bottom: -8px; z-index: 1; }
.lateral td.txt { width: 100%; }
.outras { grid-column: 2; background: var(--painel); margin: 0 -10px -8px 0; padding: 6px 10px 0; border-top: 1px solid var(--linha); height: calc(var(--t-menor) * 2.7 + 2 * var(--pad-v) + 12px + 3 * (var(--t-base) * 1.35 + 2 * var(--pad-v) + 5px)); }
.outras h3 { margin-top: 0; }
.fechar { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; }
.custo { margin-top: 8px; }
form.inline { display: inline; }
select.discreto { border-color: transparent; background: transparent; color: var(--mudo); padding-left: 0; }
select.discreto:hover { color: var(--texto); border-color: var(--linha); }
form.inline input[name=por_chapa] { width: 3.5em; text-align: right; }

.calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; }
input.pecas { width: 6ch; text-align: right; }
.vendas { grid-template-columns: minmax(0, 1fr); align-content: start; }
.vendas h2 a { padding: 0 6px; color: var(--texto); }
.m-alta { color: var(--op-producao); }
.m-media { color: var(--op-uso); }
.m-baixa { color: var(--neg); }
td.barra { position: relative; }
td.barra::after { content: ""; position: absolute; inset: 3px 0 3px auto; width: var(--w); background: currentColor; opacity: .16; pointer-events: none; }
td.m-alta.barra::before { content: "▲ "; }
td.m-baixa.barra::before { content: "▼ "; }
td.compra { color: var(--op-compra); }
td.compra b::before { content: "● "; }
tfoot td { background: var(--fundo); border-top: 1px solid var(--linha); }
.acoes-calc { display: flex; gap: 6px; margin-top: 8px; }
button.enviar { margin-left: auto; color: var(--op-producao); border-color: var(--op-producao); }
button.enviar:hover { background: var(--op-producao); color: var(--fundo); border-color: var(--op-producao); }
.acoes-calc .botao { padding: 1px 8px; border: 1px solid var(--linha); color: var(--mudo); }
.atualizar { grid-template-columns: minmax(0, 560px); align-content: start; }
.envio { margin-top: 8px; }
.envio input { width: auto; }
.envio button.enviar { margin-left: 0; }

.flutuante { position: fixed; right: 16px; top: 40px; background: var(--flutuante); border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); padding: 10px 12px; z-index: 10; }
.flutuante td { border: 0; }

@media (max-width: 1000px) {
  html, body { height: auto; }
  body { overflow: auto; }
  .topo { flex-wrap: wrap; }
  main, .painel, .area, .dupla { display: block; }
  main > *, .area > *, .dupla > * { margin-bottom: 16px; }
  .rola, .area .produtos { max-height: 60vh; }
  .lateral, .outras { margin: 0; }
  .outras { height: auto; padding-bottom: 8px; }
}