/* Ficha tecnica de custo do produto -- o que hoje e uma planilha montada a mao e
   colada no briefing como PNG. Prefixo fct-. Toda cor/estado nasce aqui.

   A tela responde: DE QUE E FEITO o custo deste produto, e o numero fecha?
   Por isso o custo total e o elemento mais pesado da secao, e cada bloco carrega
   o proprio subtotal -- quem confere soma de cima para baixo, como na planilha. */

.fct-secao { margin-top: .85rem; padding-top: .6rem; border-top: 1px solid #f0f0f0; }

.fct-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .1rem;
}
.fct-titulo { font-size: .8rem; font-weight: 700; color: #495057; }
.fct-sub { font-size: .7rem; color: #6c757d; line-height: 1.35; margin-bottom: .5rem; }

/* A ficha inteira vive dentro de um <form> proprio. Nao e enfeite: solto na
   pagina, o campo de texto da linha ficava no mesmo grupo dos campos de senha
   do "Alterar senha", e o Chrome lia gravar a ficha como envio de login --
   abria "Salvar senha?" com o nome da materia-prima no lugar do usuario. */
.fct-form { display: contents; }

/* Trabalho que existe so na tela: some assim que a ficha e gravada. Fica junto
   do titulo porque e ali que a pessoa olha antes de sair do briefing. */
.fct-nao-salvo {
  font-size: .66rem; font-weight: 700; color: #8a4b00;
  background: #fff4e0; border: 1px solid #f5d9a8;
  border-radius: 999px; padding: .02rem .4rem; white-space: nowrap;
}

/* Descartar o que foi digitado e destrutivo: pergunta na propria secao, com o
   que se perde escrito por extenso. Nada de confirm() do navegador. */
.fct-confirma {
  margin-top: .5rem; padding: .45rem .55rem;
  border: 1px solid #f5d9a8; background: #fffaf2; border-radius: .35rem;
  font-size: .73rem; color: #6b4b12; line-height: 1.4;
}
.fct-confirma b { color: #8a4b00; }
.fct-confirma-acoes { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }

/* ---- total ---------------------------------------------------------------- */
/* O numero que a secao inteira existe para produzir. Vem com a conta ao lado:
   sozinho ele nao diz de onde saiu, e e exatamente isso que faltava no PNG. */
.fct-total {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  padding: .4rem .55rem; border-radius: .35rem;
  background: #f1f5f9; border: 1px solid #dfe6ee;
}
.fct-total-val { font-size: 1.02rem; font-weight: 700; color: #212529; }
.fct-total-conta { font-size: .7rem; color: #5a6b7d; }

/* Ficha x custo aprovado no briefing. Cor nunca informa sozinha -- o texto diz
   o mesmo, e a acao ("Usar como custo") fica ao lado. */
.fct-conf { font-size: .72rem; margin-top: .3rem; }
.fct-conf--igual   { color: #14653a; }
.fct-conf--difere  { color: #8a4b00; }
.fct-conf--vazio   { color: #6c757d; }

/* ---- blocos --------------------------------------------------------------- */
.fct-bloco { margin-top: .55rem; }
.fct-bloco-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .2rem;
}
.fct-bloco-nome {
  font-size: .72rem; font-weight: 700; color: #495057;
  text-transform: uppercase; letter-spacing: .02em;
}
.fct-bloco-sub { font-size: .74rem; font-weight: 700; color: #212529; }

.fct-rola { overflow-x: auto; }
.fct-tab { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .74rem; }
.fct-tab th {
  text-align: left; font-weight: 600; color: #6c757d; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .02em;
  padding: .15rem .3rem; border-bottom: 1px solid #e9ecef; white-space: nowrap;
}
/* Valor e quantidade a direita, texto a esquerda, cabecalho na mesma grade. */
.fct-tab th.fct-num, .fct-tab td.fct-num { text-align: right; }
.fct-tab td { padding: .1rem .3rem; vertical-align: middle; }
.fct-tab tbody tr + tr td { border-top: 1px solid #f4f6f8; }

.fct-tab input {
  width: 100%; min-width: 0; border: 1px solid transparent; background: transparent;
  border-radius: .25rem; padding: .18rem .3rem; font: inherit; color: #212529;
}
.fct-tab input:hover  { border-color: #dee2e6; background: #fff; }
.fct-tab input:focus  { outline: 2px solid #a5c8ff; border-color: #4c8bf5; background: #fff; }
.fct-tab input.fct-num { text-align: right; }

.fct-linha-total { font-variant-numeric: tabular-nums; color: #212529; white-space: nowrap; }
.fct-linha-total--mudo { color: #adb5bd; }

.fct-x {
  border: 0; background: none; padding: .1rem .25rem; cursor: pointer;
  color: #adb5bd; line-height: 1; border-radius: .25rem;
}
.fct-x:hover { color: #c92a2a; background: #fdecec; }
.fct-x:focus-visible { outline: 2px solid #c92a2a; outline-offset: 1px; }

.fct-add {
  border: 1px dashed #ced4da; background: none; border-radius: .3rem;
  padding: .15rem .5rem; font-size: .7rem; color: #495057; cursor: pointer;
  margin-top: .2rem;
}
.fct-add:hover { border-color: #4c8bf5; color: #1c6fb8; background: #f7fbff; }

/* ---- sugestao de materia-prima -------------------------------------------- */
.fct-sug-caixa { position: relative; }
/* `fixed`, nao `absolute`: a caixa nasce dentro de .fct-rola, que tem
   `overflow-x: auto` e recorta qualquer filho posicionado. Com absolute a lista
   aparecia espremida em duas linhas com barra de rolagem, e nao dava para
   escolher. Quem calcula topo/esquerda/largura e o JS, pelo rect do input. */
.fct-sug {
  position: fixed; z-index: 1080;
  background: #fff; border: 1px solid #ced4da; border-radius: .3rem;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
  max-height: 240px; overflow-y: auto;
}
.fct-sug-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .3rem .45rem; font-size: .74rem; cursor: pointer; line-height: 1.3;
}
.fct-sug-item:hover, .fct-sug-item[aria-selected="true"] { background: #eef5ff; }
.fct-sug-nome { min-width: 0; overflow-wrap: anywhere; }
.fct-sug-meta { font-size: .68rem; color: #6c757d; white-space: nowrap; }

/* ---- acoes e estados ------------------------------------------------------ */
.fct-acoes { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }
.fct-msg { font-size: .72rem; margin-top: .35rem; }
.fct-msg--erro { color: #9d2b2b; }
.fct-msg--ok   { color: #14653a; }

/* Vazio e resultado, nao ausencia: diz o que a ficha faria e como comecar. */
.fct-vazio {
  border: 1px dashed #dee2e6; border-radius: .35rem;
  padding: .5rem .6rem; font-size: .73rem; color: #5a6b7d; line-height: 1.4;
}
.fct-vazio b { color: #34495e; }

@media (max-width: 575.98px) {
  .fct-cab { flex-direction: column; align-items: stretch; }
  .fct-acoes .btn { flex: 1 1 auto; }
  /* A referencia e o campo menos preenchido da ficha (na planilha real ela esta
     vazia em todas as linhas) e no telefone empurrava o valor para fora da vista.
     Sai da tabela; continua editavel no desktop. */
  .fct-ref { display: none; }
  .fct-tab { min-width: 320px; }
}

/* Saida sem gravar. Discreta de proposito: fica ao lado do Salvar, mas nao
   disputa com ele -- a acao principal continua sendo gravar a ficha. */
.fct-cancelar { font-size: .74rem; color: #6c757d; text-decoration: none; padding: .18rem .4rem; }
.fct-cancelar:hover { color: #9d2b2b; text-decoration: underline; }